js时钟(二)

继上篇写了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的绘制。具体效果如下：