继上篇写了js的常用数字时钟的实现后,这里总结一下模拟时钟的实现方法。注:其中时钟的背景来源于网络。
模拟时钟,主要是绘制时钟,将获取到的系统时间分别作为时针分针秒针的旋转角,每次在时钟中重绘,其主要代码如下。
var canvas=document.getElementById('canvas').getContext('2d');
var clockImage =new Image();
clockImage.src="clock.png";
//update the clock
setInterval(function(){
//clear the map
canvas.clearRect(0,0,500,500);
canvas.save();
//draw image
canvas.drawImage(clockImage,0,0,500,500);
//set Text
canvas.textAlign="center";
canvas.textBaseline="middle";
canvas.translate(250,250);
canvas.font = '36px Arial';
canvas.fillStyle = '#000';
canvas.beginPath();
for(var i=1;i<=12;i++){
var degree=(i-3)*Math.PI*2/12;
var x=250*Math.cos(degree)*0.7;
var y=250*Math.sin(degree)*0.7;
canvas.fillText(i,x,y);
}
//get current time
var now=new Date();
var h=now.getHours();
var m=now.getMinutes();
var s=now.getSeconds();
h=h>12?h-12:h;
var hours=h+m/60;
var minutes=m+s/60;
//draw hours
canvas.save();
var degree=(hours-3)*Math.PI*2/12;
canvas.rotate(degree);
canvas.beginPath();
canvas.moveTo(-15,-5);
canvas.lineTo(-15,5);
canvas.lineTo(250*0.5,-1);
canvas.lineTo(250*0.5,1);
canvas.fill();
canvas.restore();
//draw minutes
canvas.save();
degree=(minutes-15)*Math.PI*2/60;
canvas.rotate(degree);
canvas.beginPath();
canvas.moveTo(-15,-4);
canvas.lineTo(-15,4);
canvas.lineTo(250*0.6,-1);
canvas.lineTo(250*0.6,1);
canvas.fill();
canvas.restore();
//draw seconds
canvas.save();
degree=(s-15)*Math.PI*2/60;
canvas.rotate(degree);
canvas.beginPath();
canvas.moveTo(-15,-3);
canvas.lineTo(-15,3);
canvas.lineTo(250*0.7,-1);
canvas.lineTo(250*0.7,1);
canvas.fill();
canvas.restore();
canvas.restore();
},1000);
在这个过程中出现的问题:
* canvas不显示
解决办法:在其他均正确配置时,注意其位置,若绘制的图形不在canvas的范围内,canvas会不显示;
* canvas绘制出现不正确的部分
解决办法:注意restore和save成对出现;
* canvas中的文字出现对不齐,偏右或者偏下的问题
解决办法:设置其textAlign为center,因为其默认为start(文本在指定的位置开始),设置其textBaseline为middle,因为其默认为alphabetic(普通字母的基准线)。
至此,一个模拟时钟绘制完成,基本熟悉了canvas的绘制。具体效果如下: