canvas实现简易时钟效果

最终效果：

1、设置canvas环境，这一部分比较基础，不做详细展开。

var canvas=document.getElementById('myCanvas');
canvas.width= document.documentElement.clientWidth*0.75;
canvas.height=document.documentElement.clientHeight*0.75;
radius = canvas.height/2-35;
 
var context=canvas.getContext("2d");
context.strokeStyle = "#000";
context.lineWidth = 2;

2、绘制固定部分
通过分析，我们可以知道，固定部分为大圆，数字，与中心点。大圆与中心点的绘制比较简单，通过arc函数就能完成。数字部分，我们需要通过计算来得到其坐标。假设圆心坐标为（a,b），则其X坐标为a+cos(angel)*r-c,其Y坐标为b+sin(angel)*r+c。由于数字在大圆外部，因此需要添加一个偏移量c。

function drawer(cxt) {
	cxt.beginPath();
	cxt.arc(canvas.width/2,canvas.height/2,radius,0,Math.PI*2,true);
	cxt.closePath();
 
	cxt.stroke();
 
	cxt.beginPath();
	cxt.arc(canvas.width/2,canvas.height/2,5,0,Math.PI*2);
	cxt.closePath();
 
	cxt.fill();
        //绘制数字
	var angle = 0;
	var measureWidth = 0;
	cxt.font = "15px Arial";
	for (var i=1;i<=12;i++){
		angle = Math.PI/6*(i-3);
		measureWidth = cxt.measureText(i).width;
		cxt.beginPath();
		cxt.fillText(i,canvas.width/2+Math.cos(angle)*(radius+20)-measureWidth/2,canvas.height/2+Math.sin(angle)*(radius+20)+6);
		cxt.closePath();
	}
}

3、绘制运动部分
通过分析，我们可以发现运动部分即为时针，分针和秒针。首先，我们通过Date()对象得到当前时间。三条线段的出发点都在圆心上，因此我们只需要计算另一个顶点就行。而计算顶点坐标，其实和上面计算数字的坐标是一样的，只要知道其角度即可。以最麻烦的时针为例，它会随着分钟的改变而产生细小的变化，因此它的公式是angel=(hours-3)*30+(minutes/60)*30，减3的原因是圆的角度是从x轴正方向开始计算的，而我们的1点在逆时针60度方向，因此需要进行偏移。另外，需要注意的是，Math.cos()和Math.sin()是以弧度计算的，因此要把角度转换成弧度，角度转换成弧度的公式为：π/180×角度。因此，我们最后的公式为angle=Math.PI/180*((hours-3)*30+(minutes/60)*30)。

function drawerHand(cxt){
	var myDate = new Date();
	var hours=myDate.getHours();
	if (hours>12){
		hours = hours % 12;
	}
	var minutes = myDate.getMinutes();
	var seconds = myDate.getSeconds();
 
	angle=Math.PI/180*((hours-3)*30+(minutes/60)*30);
	cxt.moveTo(canvas.width/2,canvas.height/2);
	cxt.lineTo(canvas.width/2+Math.cos(angle)*(radius-75),canvas.height/2+Math.sin(angle)*(radius-75));
	cxt.stroke();
 
	angle=Math.PI/180*(6*minutes-90);
	cxt.moveTo(canvas.width/2,canvas.height/2);
	cxt.lineTo(canvas.width/2+Math.cos(angle)*(radius-45),canvas.height/2+Math.sin(angle)*(radius-45));
	cxt.stroke();
 
	angle=Math.PI/180*(6*seconds-90);
	cxt.moveTo(canvas.width/2,canvas.height/2);
	cxt.lineTo(canvas.width/2+Math.cos(angle)*(radius-15),canvas.height/2+Math.sin(angle)*(radius-15));
	cxt.stroke();
}

4、设置定时器

function control () {
	context.clearRect(0,0,canvas.width,canvas.height);
	drawer(context); //固定部分
	drawerHand(context);   //重绘部分
}
var loop = setInterval(control,1000);

最后，我们设置定时器，时钟就开始工作了，但要注意，每次重绘的时候，需要把前面的绘制去除。
一个基于canvas的简易时钟效果就完成了。