如何用canvas画布绘制时钟（详解！）

先生成画布：

<canvas class="can" width="500px" height="500px"></canvas>

调画布样式：

.can{
        border: 1px solid;
        display: block;
        margin: auto;
    }

JS部分：

 var can = document.getElementsByClassName("can")[0];
        var cantxt = can.getContext("2d");

    function fun(){
        //保存当前绘图
        cantxt.save();
        
        //表盘
        cantxt.translate(250,250)
        cantxt.beginPath();
        cantxt.lineWidth = 10;
        cantxt.arc(0,0,245,0,Math.PI*2)
        cantxt.stroke();
        cantxt.closePath();

        //数字
        var num = [3,4,5,6,7,8,9,10,11,12,1,2];
        cantxt.textAlign = 'center';
        cantxt.textBaseline = "middle";
        cantxt.font = "20px Arial";
        for(var i = 0;i < num.length; i ++){
            //以圆心为起始点，以开始画的落笔点展开度数
            var rad = Math.PI * 2 / 12 * i;
			var x = Math.cos(rad) * 215;    //余弦值
			var y = Math.sin(rad) * 215;    //正弦值
			cantxt.fillText(num[i],x,y)     //以数组0下标开始刻画数字
            
        }

        //刻度
        for(var i = 0;i<60;i++){    //总共60个刻度
        //原理同上
            var o = Math.PI * 2 / 60 * i;   
            var x = Math.cos(o) * 230;
            var y = Math.sin(o) * 230;

            cantxt.beginPath();
            //绘制时区分时刻度和分刻度，样式改变
            if(i % 5==0){
                cantxt.fillStyle = "#000";

            }else{
                cantxt.fillStyle = "#ccc";
                
            }
            cantxt.arc(x,y,2,0,Math.PI * 2)
            cantxt.closePath();
            cantxt.fill();
        }
    }
    //时针
    function drawHour(hour,minu){
        cantxt.save();
        cantxt.beginPath();
        var h = Math.PI * 2 / 12 * hour;
        var m = Math.PI * 2 / 12 / 60 * minu;
        cantxt.rotate(h+m);     //旋转画布
        cantxt.lineWidth = 8;   
        cantxt.lineCap = "round";   //给时针弧度
        cantxt.strokeStyle = "red";
        //画时针
        cantxt.moveTo(0,20)
        cantxt.lineTo(0,-110)
        cantxt.stroke();
        cantxt.closePath();
        //出栈(全部写完归还到画布上)
        cantxt.restore();
    }

    //分针
    function drawMinu(minu){
        cantxt.save();
        cantxt.beginPath();
        var o = Math.PI * 2 / 60 * minu;
        cantxt.rotate(o);   //旋转‘o’度
        cantxt.lineWidth = 5;
        cantxt.lineCap = "round";
        cantxt.strokeStyle = "green"
        cantxt.moveTo(0,20);
        cantxt.lineTo(0,-180)
        cantxt.stroke();
        cantxt.restore();
    }

    //秒针
    function drawSeco(seco){
        cantxt.save();
        cantxt.beginPath();
        var o = Math.PI * 2 / 60 * seco;
        cantxt.rotate(o);   //旋转‘o’度
        cantxt.lineWidth = 2;
        cantxt.moveTo(0,20);
        cantxt.lineTo(0,-220);
        cantxt.strokeStyle = "black";
        cantxt.stroke();
        cantxt.fill();
        cantxt.closePath();
       
        cantxt.restore();
        
    }
    //中心点
    function drawDot(){
        cantxt.beginPath();
        cantxt.strokeStyle="#6495ED";
        cantxt.arc(0,0,5,0,Math.PI*2);
        cantxt.closePath();
        cantxt.fill();
    }

    //获取时间
    function draw(){
        cantxt.clearRect(0,0,500,500);     //清除画布
        var now = new Date();
        var hour = now.getHours();
        var minu = now.getMinutes();
        var seco = now.getSeconds();
        hour>12?hour -= 12:hour;
        fun();
        drawHour(hour,minu);
        drawMinu(minu);
        drawSeco(seco);
        drawDot();
        console.log(hour)
        cantxt.restore();
    }
    setInterval(draw,1000);
    draw();