直接上代码，老实人，不忽悠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
<script type="text/javascript">
    var canvas=document.getElementById('canvas');
    var cxt=canvas.getContext('2d');
    function drawClock() {
        //清除画布
        cxt.clearRect(0,0,500,500);
        var now=new Date();
        var sec=now.getSeconds();
        var min=now.getMinutes();
        var hour=now.getHours();

        //小时转换为浮点类型
        hour+=min/60;
        //分钟转化为浮点类型
        min+=sec/60;
        //将24小时进制转化为12小时
        hour=hour>12?hour-12:hour;



        //表盘
        cxt.lineWidth=10;
        cxt.strokeStyle='blue';
        cxt.beginPath();
        cxt.arc(250,250,200,0,360,false);
        cxt.closePath();
        cxt.stroke();

        //刻度
        for(var i=0;i<12;i++){
            cxt.save();
            //设置时针的颜色
            cxt.lineWidth=7;
            cxt.strokeStyle='#000';
            //先设置00点
            cxt.translate(250,250);
            //设置旋转角度
            cxt.rotate(i*30*Math.PI/180);  //弧度
            cxt.beginPath();
            cxt.moveTo(0,-170);
            cxt.lineTo(0,-190);
            cxt.closePath();
            cxt.stroke();
            cxt.restore();
        }

        //时刻度
        for(var i=0;i<60;i++){
            cxt.save();
            cxt.lineWidth=5;
            cxt.strokeStyle='#000';
            cxt.translate(250,250);
            //设置旋转角度
            cxt.rotate(i*6*Math.PI/180);
            //画分钟刻度
            cxt.beginPath();
            cxt.moveTo(0,-180);
            cxt.lineTo(0,-190);
            cxt.closePath();
            cxt.stroke();
            cxt.restore();
        }

        //时针
        cxt.save();
        cxt.lineWidth=7;
        cxt.strokeStyle='#000';
        //设置00点
        cxt.translate(250,250);
        //设置旋转角度
        cxt.rotate(hour*30*Math.PI/180);
        cxt.beginPath();
        cxt.moveTo(0,-140);
        cxt.lineTo(0,10);
        cxt.closePath();
        cxt.stroke();
        cxt.restore();

        //分针
        cxt.save();
        cxt.lineWidth=5;
        cxt.strokeStyle='#000';
        //设置00点
        cxt.translate(250,250);
        //设置旋转角度
        cxt.rotate(min*6*Math.PI/180);
        cxt.beginPath();
        cxt.moveTo(0,-160);
        cxt.lineTo(0,15);
        cxt.closePath();
        cxt.stroke();
        cxt.restore();

        //秒针
        cxt.save();
        cxt.lineWidth=3;
        cxt.strokeStyle='red';
        //设置00点
        cxt.translate(250,250);
        //设置旋转角度
        cxt.rotate(sec*6*Math.PI/180);
        cxt.beginPath();
        cxt.moveTo(0,-170);
        cxt.lineTo(0,20);
        cxt.closePath();
        cxt.stroke();
        //画小圆点
        cxt.beginPath();
        cxt.arc(0,0,5,0,360,false);
        cxt.closePath();
        //设置填充
        cxt.fillStyle='gray';
        cxt.fill();
        cxt.stroke();
        //秒针小圆点
        cxt.beginPath();
        cxt.arc(0,-150,5,0,360,false);
        cxt.closePath();
        cxt.fillStyle='gray';
        cxt.fill();
        cxt.stroke();
        cxt.restore();
    }


    //使用定时器
    setInterval(drawClock,1000);
</script>