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的简易时钟效果就完成了。

你可能感兴趣的:(前端开发,canvas,前端开发)