HTML5 canvas--可动的时钟

HTML代码

<canvas id="mycanvas" width="600" height="600">你的浏览器不支持HTML5</canvas>

JS代码

var myCanvas=document.getElementById("mycanvas");
            var ctx=myCanvas.getContext("2d");
            function drawClock(){
                //清除canvas里所有图形
                ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
                //获得当前时间
                var now=new Date();
                //格式： Date {Tue Aug 16 2016 10:54:19 GMT+0800}
                var hours=now.getHours();
                var mins=now.getMinutes();
                var secd=now.getSeconds();
                var str=hours+":"+mins+":"+secd;
                hours=hours+(mins/60);
                //转为12进制
                hours=hours>12?hours-12:hours;
                //背景圆
                ctx.save();
                ctx.beginPath();
                ctx.lineWidth=6;
                ctx.arc(300,300,200,0,2*Math.PI,true);
                ctx.stroke();
                ctx.closePath();
                ctx.beginPath();
                ctx.font="16px 华文行楷";
                ctx.fillText("Made In China",250,430);
                ctx.closePath();
                ctx.beginPath();
                ctx.font="16px 华文行楷";
                ctx.fillText(str,250,30);
                ctx.closePath();
                ctx.restore();
                //刻度原理：每转一次，画一条线段
                //1.分刻度
                for ( var i=0;i<60;i++ ) {
                    ctx.save();
                    ctx.lineWidth=2;
                    ctx.strokeStyle="#000";
                    //将画布的原点坐标转换成(300,300)，时刻度同理
                    ctx.translate(300,300);
                    //旋转角度
                    ctx.rotate((i*6)*Math.PI/180);
                    ctx.beginPath();
                    //分针长度为10
                    ctx.moveTo(0,192);
                    ctx.lineTo(0,182);
                    ctx.closePath();
                    ctx.stroke();
                    ctx.restore();
                }
                //2.时刻度
                for ( var i=0;i<12;i++ ) {
                    ctx.save();
                    ctx.lineWidth=3;
                    ctx.strokeStyle="#000";
                    //数字，但是坐标写死了
                    ctx.font="20px 楷体";
                    ctx.fillText("12",290,145);
                    ctx.fillText("1",380,170);
                    ctx.fillText("2",435,225);
                    ctx.fillText("3",460,308);
                    ctx.fillText("4",435,392);
                    ctx.fillText("5",380,450);
                    ctx.fillText("6",295,472);
                    ctx.fillText("7",209,446);
                    ctx.fillText("8",150,392);
                    ctx.fillText("9",128,308);
                    ctx.fillText("10",150,225);
                    ctx.fillText("11",208,170);
                    ctx.translate(300,300);
                    ctx.rotate(((i+9)*30)*Math.PI/180);
                    ctx.beginPath();
                    ctx.moveTo(0,195);
                    ctx.lineTo(0,175);
                    //原理是对的，但是数字会因为画布的转动而颠倒故不采取
                    //ctx.fillText(i+1,100,135);
                    ctx.closePath();
                    ctx.stroke();
                    ctx.restore();
                }
                //3.时针
                ctx.save();
                ctx.lineWidth=7;
                ctx.strokeStyle="black";
                ctx.translate(300,300);
                ctx.rotate(hours * 30 * Math.PI / 180);
                ctx.beginPath();
                //时针长度
                ctx.moveTo(0, -130);
                ctx.lineTo(0, 10);
                ctx.closePath();
                ctx.stroke();
                //时针三角形
                ctx.beginPath();
                ctx.moveTo(0,-135);
                ctx.lineTo(-3,-125);
                ctx.lineTo(3,-125);
                ctx.closePath();
                ctx.stroke();

                ctx.restore();
                //4.分针
                ctx.save();
                ctx.lineWidth=5;
                ctx.strokeStyle="blue";
                ctx.translate(300,300);
                ctx.rotate(mins * 6 * Math.PI / 180);
                ctx.beginPath();
                ctx.moveTo(0, -160);
                ctx.lineTo(0, 10);
                ctx.closePath();
                ctx.stroke();
                //分针三角形
                ctx.beginPath();
                ctx.moveTo(0,-160);
                ctx.lineTo(-5,-150);
                ctx.lineTo(5,-150);
                ctx.closePath();
                ctx.stroke();
                ctx.restore();
                //6.秒针
                ctx.save();
                ctx.lineWidth=3;
                ctx.strokeStyle="red";
                ctx.translate(300,300);
                ctx.rotate(secd * 6 * Math.PI / 180);
                ctx.beginPath();
                ctx.moveTo(0, -170);
                ctx.lineTo(0, 10);
                ctx.closePath();
                ctx.stroke();   

                //画交叉点,即圆心
                ctx.beginPath();
                ctx.arc(0, 0, 5, 0, 360, false);
                ctx.closePath();
                ctx.fillStyle = "gray";
                ctx.strokeStyle="red";
                ctx.fill();
                ctx.stroke();

                ctx.beginPath();
                ctx.arc(0, -150, 5, 0, 360, false);
                ctx.closePath();
                ctx.fillStyle = "gray";
                ctx.strokeStyle="red";
                ctx.fill();
                ctx.stroke();
                ctx.restore();

            }
            //每隔1秒画一次
            setInterval(drawClock,1000);