canvas画动画时钟的实例代码

来源：动视网责编：小OO 时间：2020-11-27 20:16:53

canvas画动画时钟的实例代码

我试水了画了一个时钟，和MDN的例子略有一点不同。I work it by myself。<；，0，300，300)；ctx.translate(150，150)；ctx.lineWidth = 4；ctx.strokeStyle = "；#a77"；ctx.beginPath()；ctx.arc(0，0，100，0，Math.PI*2，true)；ctx.stroke()；ctx.rotate(-Math.PI/2)；//minute mark ctx.save()；for(var i = 0；i<；60；i++){if(i%5。= 0){ ctx.beginPath()；ctx.moveTo(90，0)；ctx.lineTo(94，0，0。

推荐度：

点击下载本文 文档为doc格式

导读我试水了画了一个时钟，和MDN的例子略有一点不同。I work it by myself。<；，0，300，300)；ctx.translate(150，150)；ctx.lineWidth = 4；ctx.strokeStyle = "；#a77"；ctx.beginPath()；ctx.arc(0，0，100，0，Math.PI*2，true)；ctx.stroke()；ctx.rotate(-Math.PI/2)；//minute mark ctx.save()；for(var i = 0；i<；60；i++){if(i%5。= 0){ ctx.beginPath()；ctx.moveTo(90，0)；ctx.lineTo(94，0，0。

今天的时间比较充裕，心血来潮，为大家分享一个html5的小例子，希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例，希望对你们的学习有帮助！高手嘛！请跳过吧！

我试水了画了一个时钟，和MDN的例子略有一点不同。I work it by myself！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>Title</title>
</head><body onload="draw()">
<canvas id="canvas" width="300" height="300">
</canvas>
<script>
function init()
{
var ctx = document.getElementById('canvas').getContext('2d');

 ctx.save();
 ctx.clearRect(0,0,300,300);
 ctx.translate(150,150);
 ctx.lineWidth = 4;
 ctx.strokeStyle = "#a77";
 ctx.beginPath();
 ctx.arc(0,0,100,0,Math.PI*2,true);
 ctx.stroke();
 ctx.rotate(-Math.PI/2);//minute mark ctx.save();for(var i = 0;i<60;i++){if(i%5 != 0){
 ctx.beginPath();
 ctx.moveTo(90,0);
 ctx.lineTo(94,0);
 ctx.stroke();
 }
 ctx.rotate(Math.PI/30); }
 ctx.restore();//hour mark ctx.save();for(var i=1;i<=12;i++){
 ctx.beginPath();
 ctx.moveTo(85,0);
 ctx.lineTo(95,0);
 ctx.stroke();
 ctx.rotate(Math.PI/6); }
 ctx.restore();
 window.requestAnimationFrame(clock);
 }function clock() {var ctx = document.getElementById('canvas').getContext('2d');var now = new Date();var sec = now.getSeconds();var min = now.getMinutes();var hr = now.getHours();
 hr = hr>=12 ? hr-12 : hr;

 ctx.beginPath();
 ctx.arc(0,0,82,0,Math.PI*2,false);
 ctx.clip();
 ctx.clearRect(-90,-90,180,180);//write hour ctx.save();
 ctx.lineWidth = 6;
 ctx.rotate(hr*Math.PI/6 + min*Math.PI/360 + sec*Math.PI/21600); ctx.beginPath();
 ctx.moveTo(0,0);
 ctx.lineTo(50,0);
 ctx.stroke();
 ctx.restore();//write minute ctx.save();
 ctx.lineWidth = 3;
 ctx.rotate(min*Math.PI/30 + sec*Math.PI/1800);
 ctx.beginPath();
 ctx.moveTo(0,0);
 ctx.lineTo(65,0);
 ctx.stroke();
 ctx.restore();//write second ctx.save();
 ctx.lineWidth = 1;
 ctx.rotate(sec*Math.PI/30); ctx.beginPath();
 ctx.moveTo(0,0);
 ctx.lineTo(80,0);
 ctx.stroke();
 ctx.restore();

 window.requestAnimationFrame(clock);
 }

 init();
 </script>
 </body>
 </html>

View Code

这里给出MDN的例子页：点我点我

和MDN的例子不同的是，MDN每次都要重绘整个时钟，而我的做法则将时钟表盘和3个指针分离开来，只需重绘指针。

我觉得这里有两个难点：一个是计算时分针的角度（分针走的同时，时针也会走一些角度）。一个是重绘指针的区域。