canvas实现的时钟效果 canvas实现的时钟效果

最近在网上看到了一个css3实现的可爱时钟，觉得很nice,然后就想着用canvas试试实现这个时钟效果。首先，要实现时钟需要先计算时钟上的数字应该占整个圆的大小。
因为一个圆是360度，所以数字之间就是360/12=30度，所以我在圆上画出数字的代码是这样的：
【canvas实现的时钟效果】drawNumber:function(){
this.context.save();
for(var i = 1; i < 13; i++){
var angle = i*30;
angle = angle*Math.PI/180;
var x = Math.round(Math.sin(angle)*(this.r-20));
var y = Math.round(-Math.cos(angle)*(this.r-20));
this.context.fillStyle="#8DA6B8";
this.context.font = "bold 20px Calibri";
this.context.textAlign = "center";
this.context.textBaseline = "middle";
this.context.fillText(i,x+this.widths/2,y+this.heights/2);
}
this.context.restore();
},
因为Math.cos()和Math.sin()接受的都是弧度制，所以需要把30度转换成对应的弧度喔。
其次，我们来看看怎么画时钟上的时针、分针以及秒针。
因为时针、分针、秒针要随着时间的改变而改变，所以我们需要获取当前时间以及context.translate(this.widths/2,this.heights/2); context.rotate(rotate); 来对时针、分针、秒针的旋转。
其中时针的旋转弧度是：hrotate = (h*30+(m/60)*30+(s/3600)*30)*Math.PI/180; （ps:每过一个小时，时针就需要旋转30度）
分针的旋转弧度是：mrotate = (m*6+(s/60)*6)*Math.PI/180; （ps:每过一分钟，分针就需要旋转6度）
秒针的旋转弧度是：srotate = (s*6)*Math.PI/180; （ps:每过一秒，秒针就需要旋转6度）

var time = new Date(); var h = time.getHours(); var m = time.getMinutes(); var s = time.getSeconds(); var hrotate = (h*30+(m/60)*30+(s/3600)*30)*Math.PI/180; var mrotate = (m*6+(s/60)*6)*Math.PI/180; var srotate = (s*6)*Math.PI/180; // console.log(h + ':' + m + ':' + s); //时针 this.context.save(); this.context.translate(this.widths/2,this.heights/2); this.context.save(); this.context.rotate(hrotate); this.context.beginPath(); this.context.lineCap="round"; this.context.moveTo(0,0); this.context.lineTo(0,-40); this.context.strokeStyle="#1AA9D8"; this.context.lineWidth=6; this.context.stroke(); this.context.closePath(); this.context.restore(); //分针 this.context.save(); this.context.rotate(mrotate); this.context.beginPath(); this.context.lineCap="round"; this.context.moveTo(0,0); this.context.lineTo(0,-50); this.context.strokeStyle="#23BCEF"; this.context.lineWidth=4; this.context.stroke(); this.context.closePath(); this.context.restore(); //秒针 this.context.save(); this.context.rotate(srotate); this.context.beginPath(); this.context.lineCap="round"; this.context.moveTo(0,0); this.context.lineTo(0,-65); this.context.strokeStyle="#23BCEF"; this.context.lineWidth=1; this.context.stroke(); this.context.closePath(); this.context.restore(); this.context.restore();

最后，使用setInterval()方法来实现画布的周期性更新，在每次绘画之前需要先将画布清空哟，要不然，嘿嘿，你懂的。
这样我们的时钟就完成了，canvas是不是也很赞呀！好了，canvas时钟就讲到这啦，有什么讲的不对的地方希望各位大神指正，小女子在此谢过！
转载于:https://www.cnblogs.com/pwei/p/canvas_clock.html