<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <canvas id="clock" width="500" height="500"></canvas>
        
        <script>
            var clock = document.getElementById("clock");
            var ctx = clock.getContext("2d");
            
            function drawClock(){
            
            //清除画布
            ctx.clearRect(0,0,500,500);
            var now = new Date();
            var sec = now.getSeconds();
            var min = now.getMinutes();
            var hour = now.getHours(); // 小时必须获取浮点类型
            hour = hour + min/60 ;
            //将二十四小时进制转换为12小时进制
            if(hour > 12){
                hour -= 12 ;
            }
            
            
            
            // 表盘
            ctx.lineWidth = 10 ;
            ctx.strokeStyle = "blue"
            ctx.beginPath();
            
            ctx.arc(250,250,200,0,360,false);
            ctx.closePath();
            ctx.stroke();
            // 刻度 时刻度
            for(var i=0; i<12; i++){
                ctx.save();
                ctx.lineWidth = 7 ;
                ctx.strokeStyle= "#000";
                ctx.translate(250,250) ; // 设置旋转圆点
                ctx.rotate(i*30*Math.PI/180); //设置旋转角度   : 角度*Math.PI/180 = 弧度
                ctx.beginPath();
                ctx.moveTo(0,-170);
                ctx.lineTo(0,-190);
                ctx.closePath();
                ctx.stroke();
                ctx.restore();
            }
            // 分刻度
            for(var i=0;i<60;i++){
            
                ctx.save();
                ctx.lineWidth= 5 ;
                ctx.strokeStyle = "#000" ;
                ctx.translate(250,250);
                ctx.rotate(i*6*Math.PI/180);
                ctx.beginPath();
                ctx.moveTo(0,-180);
                ctx.lineTo(0,-190);
                ctx.stroke();
                ctx.closePath();
                ctx.restore();
            }
            // 时针
            ctx.save();
            ctx.lineWidth = 7 ;
            ctx.strokeStyle = "#000";
            ctx.translate(250,250); //设置异次元空间的0,0点
            ctx.rotate(hour*30*Math.PI/180);
            ctx.beginPath();
            ctx.moveTo(0,-140);
            ctx.lineTo(0,10);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
            //分针
            ctx.save();
            ctx.lineWidth = 5 ;
            ctx.strokeStyle = "#000";
            ctx.translate(250,250); //设置异次元空间的0,0点
            ctx.rotate(min*6*Math.PI/180);
            ctx.beginPath();
            ctx.moveTo(0,-160);
            ctx.lineTo(0,15);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
            //秒针
            ctx.save();
            ctx.lineWidth = 3 ;
            ctx.strokeStyle = "#F00";
            ctx.translate(250,250); //设置异次元空间的0,0点
            ctx.rotate(sec*6*Math.PI/180);
            ctx.beginPath();
            ctx.moveTo(0,-170);
            ctx.lineTo(0,20);
            ctx.closePath();
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0,0,5,0,360,false);
            ctx.closePath();
            ctx.fillStyle="grey";
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0,-150,5,0,360,false);
            ctx.closePath();
            ctx.fillStyle="grey";
            ctx.fill();
            ctx.stroke();
            ctx.restore();
        }
        drawClock();
        setInterval(drawClock,1000);
        </script>
    </body>
</html>