模拟时钟

效果图：

 一、实现时钟外形时，表盘的刻度和数字书写

for(var i = 0;i < 60;i++){
        if(degree%30 == 0){
            cxt.beginPath();
            bigX = 400+big_radius*Math.sin(degree*Math.PI/180); //时钟刻度外面大的半径的坐标
            bigY = 300+big_radius*Math.cos(degree*Math.PI/180);
            smallX = 400+small_radius*Math.sin(degree*Math.PI/180);//时钟刻度外面小的半径的坐标
            smallY = 300+small_radius*Math.cos(degree*Math.PI/180);
            numX = 400+(small_radius-28)*Math.sin(degreeNum*Math.PI/180);//时钟刻度数字坐标
            numY = 300+(small_radius-28)*Math.cos(degreeNum*Math.PI/180);
            cxt.font = 'bold 55px Arial';//设置时钟数字样式
            cxt.textAlign = 'center';//数字水平居中
            cxt.textBaseline = 'middle';//数字垂直居中
            cxt.fillStyle = '#979797';
            cxt.moveTo(bigX,bigY); //设置刻度图像
            cxt.lineTo(smallX,smallY);
            cxt.lineWidth = 10;
            cxt.fillText(string.toString(),numX,numY);//设置数字图形
            cxt.fill();
            cxt.strokeStyle = "#979797";
            cxt.stroke();
            string = string + 1;
            if(string == 13){
                string = string - 12;
            }
        }else{
            cxt.beginPath();
            cxt.moveTo(400+big_radius*Math.sin(degree*Math.PI/180),300+big_radius*Math.cos(degree*Math.PI/180));
            cxt.lineTo(400+small_radius*Math.sin(degree*Math.PI/180),300+small_radius*Math.cos(degree*Math.PI/180));
            cxt.lineWidth = 3;//细刻度
            cxt.strokeStyle = "#979797";
            cxt.stroke();
        }

二、设置时钟表针

　　cxt.translate(400,300);//首先将坐标设置到canvas中心，后面的rotate才会按照此原点旋转
    //秒针绘制
    cxt.beginPath();
    cxt.rotate(degreeSecond);
    cxt.moveTo(-3,60);
    cxt.lineTo(0,68);
    cxt.lineTo(3,60);
    cxt.lineTo(1,-210);
    cxt.lineTo(0,-215);
    cxt.lineTo(-1,-210);
    cxt.closePath();

    cxt.fillStyle = '#979797';
    cxt.fill();

    //分针绘制
    cxt.beginPath();
    cxt.setTransform(1,0,0,1,400,300,0,0,1);
    cxt.rotate(degreeMin);
    cxt.moveTo(-5,40);
    cxt.lineTo(0,48);
    cxt.lineTo(5,40);
    cxt.lineTo(3,-180);
    cxt.lineTo(0,-185);
    cxt.lineTo(-3,-180);
    cxt.closePath();
    cxt.fillStyle = '#979797';
    cxt.fill();

    //时针绘制
    cxt.beginPath();
    cxt.setTransform(1,0,0,1,400,300,0,0,1);
    cxt.rotate(degreeHour);
    cxt.moveTo(-7,20);
    cxt.lineTo(0,28);
    cxt.lineTo(7,20);
    cxt.lineTo(5,-150);
    cxt.lineTo(0,-155);
    cxt.lineTo(-5,-150);
    cxt.closePath();
    cxt.fillStyle = '#979797';
    cxt.fill();

三、时针随时间转动

var disDegreeOfSecond = Math.PI/30; //一秒 秒针走的度数
var disDegreeOfMin = Math.PI/1800;  //一秒 分针走的度数
var disDegreeOfHour = Math.PI/21600;//一秒 时针走的度数

//使用setInterval，如果按照毫秒数增加，会出现时钟不准确的情况，就换了另一种实现方法
setInterval(function(){
        cxt.clearRect(0,0,canvas.width,canvas.height);
        clockStyle();
        date = new Date();
        hour = date.getHours();
        minutes = date.getMinutes();
        seconds = date.getSeconds();

        degreeS = seconds * disDegreeOfSecond;
 　　　　degreeM = disDegreeOfMin * (seconds + minutes * 60);
        degreeH = disDegreeOfHour * (seconds + minutes * 60 + hour * 3600);

if(hour > 12){ hour -= 12; } 

clockPointerMove(degreeS,degreeM,degreeH);

 },1000);//这样表针就不能平滑转动了



setInterval(function(){

        cxt.clearRect(0,0,canvas.width,canvas.height);
        clockStyle();
        degreeS += disDegreeOfSecond * 17/1000;
        degreeM += disDegreeOfMin * 17/1000; 
        degreeH += disDegreeOfHour * 17/1000; 

        clockPointerMove(degreeS,degreeM,degreeH);

 },17);  //表针可以平滑转动，但是时间不太准确