canvas 动画 时钟clock

<canvas id="clock" width="500" height="500"></canvas>

function drawClock(){
        var canvas = document.querySelector("#clock");
        var ctx = canvas.getContext("2d");
        drawDial(ctx); //绘制变盘
        // 绘制时针、分针、秒针
        var pi = Math.PI;
        var time = new Date();
        var s = time.getSeconds();
        var m = time.getMinutes();
        var h = time.getHours();
        var angleSecound = s*pi/30;
        var angleMinute = m*pi/30 + angleSecound/60;
        var angleHour = h*pi/6 + angleMinute/12;

        drawHand(angleSecound,190,2,"blue",ctx);
        drawHand(angleMinute,150,4,"green",ctx);
        drawHand(angleHour,80,6,"red",ctx);

        requestAnimationFrame(drawClock);

    }
    function drawHand(angle,length,width,color,ctx){
        var pi = Math.PI;
        ctx.save();
        ctx.translate(250,250);
        ctx.rotate(-pi/2 + angle);
        ctx.beginPath();
        ctx.lineCap = "round";
        ctx.moveTo(-4,0);
        ctx.lineTo(length,0);
        ctx.lineWidth = width;
        ctx.strokeStyle = color;
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
    function drawDial(ctx){
        var pi = Math.PI;
        ctx.clearRect(0,0,500,500);
        ctx.save();

        //绘制外周圆弧
        ctx.translate(250,250);
        ctx.strokeStyle="gray";
        ctx.beginPath();
        ctx.arc(0,0,200,0,2*pi);
        ctx.stroke();
        ctx.closePath();

        //绘制刻度
        for(var i=0;i<60;i++){
            ctx.save();
            ctx.rotate(-pi/2 + i*pi/30);
            ctx.beginPath();
            ctx.moveTo(180,0);
            ctx.lineTo(195,0);
            ctx.strokeStyle = i%5 ? "blue":"red";
            ctx.lineWidth = i%5 ? "2":"4";
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
        ctx.restore();
    }
    drawClock();                                                                                                                          

截图：