canvas ：原生javascript编写动态时钟

此时针是以画布的中心为圆心；

g.translate(width/2,width/2);

此函数是将画布的原点移到(width/2,width/2)

 

绘制表盘

function jiang(){
                r = width/2
                g.clearRect(0, 0, 600, 600);
                
                g.save();
                g.translate(r, r);
                g.rotate(-Math.PI / 2);

              //分钟刻度线

                for(var i = 0; i < 60; i++) {//画60个刻度线
                    g.beginPath();
                    g.strokeStyle ="white";
                    g.lineWidth = 4;
                    g.moveTo(250, 0);
                    g.lineTo(240, 0);
                    g.stroke();
                    g.rotate(Math.PI / 30); //每个6deg画一个时钟刻度线
                    g.closePath();
                }

              //时钟刻度线
                for(var i = 0; i < 12; i++) {//画12个刻度线
                    g.beginPath();
                    g.strokeStyle ="white";
                    g.lineWidth = 8;
                    g.moveTo(250, 0);
                    g.lineTo(230, 0);
                    g.stroke();
                    g.rotate(Math.PI / 6); //每个30deg画一个时钟刻度
                    g.closePath();
                }
            }

 

时针

save和restore必不可少，在这两个函数之间，改变位置不会影响到其他函数，在此段代码中特指rotate，如果没有rotate，可以不用save和restore

一定要加beginPath，免得被其他函数影响

时针和分针秒针不一样，一个30°，还有分针的移动会影响时针的位置

时针运动的原理是画好一条线，然后旋转那条线

            function drawHour(hour,minu){
                g.save();
                g.beginPath();
                g.lineWidth = 9;
                var rad = Math.PI*2/12*hour;
                var radMinu = Math.PI*2/12/60*minu;
                g.rotate(rad + radMinu)
                g.moveTo(-10,0);
                g.lineTo(r/2,0);
                g.strokeStyle = "white";
                g.stroke();
                g.restore();
            }

分针

            function drawMinu(minu){
                g.save();
                g.beginPath();
                g.lineWidth = 6;
                var radMinu = Math.PI*2/60*minu;
                g.rotate(radMinu)
                g.moveTo(-16,0);
                g.lineTo(r-100,0);
                g.strokeStyle = "white";
                g.stroke();
                g.restore();
            }

秒针

　　　　　　　function drawSeco(seco){
                g.save();
                g.beginPath();
                g.lineWidth = 3;
                var radSeco = Math.PI*2/60*seco;
                g.rotate(radSeco)
                g.moveTo(-25,0);
                g.lineTo(r-80,0);
                g.strokeStyle = "#ff0032";
                g.stroke();
                g.restore();
            }

数字表

        function drawNumClock(){
            var data = new Date();

            var sec = data.getSeconds();
            var min = data.getMinutes();
            var hour = data.getHours();

            g.fillStyle = "white";
            g.font = "20px '楷体'";
            g.beginPath();
            g.rotate(Math.PI/2)        
            g.fillText(hour,60,0);
            g.fillText(":",80,0);
            g.fillText(min,90,0);
            g.font = "20px '楷体'";
            g.fillText(sec,120,0);

        }