HTM5制作的闹钟

HTML5出来很久了一直没好好研究过，今天找视频看了，研究了一下，制作了一个闹钟。

效果图如下

  <div>

            <canvas id="Clock" width="500" height="500">your broswer can not see the clock </canvas>

            <script>

var clock = document.getElementById("Clock");

                var cxt = clock.getContext("2d");

                function DrawClock() {

                    //clear canvas  //要先清空画布，才能保持画面的动画效果

                    cxt.clearRect(0, 0, 500, 500);

                    cxt.font = "20px Blackadder ITC";

                    cxt.fillText("My clock", 220, 150);

                    cxt.font = "14px Blackadder ITC";

                    cxt.fillText("---Made by Lan", 240, 170);

                    var image = new Image();

                    image.src = "1.png";

                    cxt.drawImage(image, 220, 280, 100, 100);

                    var now = new Date();

                    var sec = now.getSeconds();

                    var min = now.getMinutes();

                    var hour = now.getHours();  // must be hour+ min/60

                    hour = hour + min / 60;

                    hour = hour > 12 ? hour - 12 : hour;

                    //round, scale, niddle

                    cxt.beginPath();

                    cxt.arc(250, 250, 200, 0, 360, false);

                    cxt.strokeStyle = "#ABCDEF";

                    cxt.lineWidth = 9;

                    cxt.stroke();

                    cxt.closePath();

                    //scale  刻度，时刻

                    cxt.font = "30px Bold";

                    for (var i = 0; i < 12; i++) {

                        cxt.save();

                        cxt.lineWidth = 7;

                        cxt.strokeStyle = "Black";

                        cxt.translate(250, 250);

                        cxt.rotate(i * 30 * Math.PI / 180);

                        cxt.beginPath();

                        cxt.moveTo(0, -170);

                        cxt.lineTo(0, -190);

                        if (i == 0) {

                            cxt.fillText("12", -10, -145);

                        }

                        else {

                            cxt.fillText(i.toString(), -10, -145);

                        }

                        cxt.stroke();

                        cxt.closePath();

                        cxt.restore();

                    }
　　　　　　　　　　　　　　　　　　// 分

                    for (var j = 0; j < 60; j++) {

                        cxt.save();

                        cxt.lineWidth = 4;

                        cxt.translate(250, 250);

                        cxt.rotate(j * 6 * Math.PI / 180);
cxt.beginPath();

                        cxt.moveTo(0, -180);

                        cxt.lineTo(0, -190);

                        cxt.strokeStyle = "Black";
cxt.stroke();
cxt.closePath();

                        cxt.restore();

                    }

                    cxt.beginPath();

                    cxt.save();

                    cxt.lineWidth = 7;

                    cxt.strokeStyle = "Black";

                    cxt.translate(250, 250);

                    cxt.rotate(hour * 30 * Math.PI / 180);

                    cxt.moveTo(0, -150);

                    cxt.lineTo(0, 10);

                    cxt.stroke();

                    cxt.restore();

                    cxt.closePath();
cxt.beginPath();

                    cxt.save();

                    cxt.lineWidth = 5;

                    cxt.strokeStyle = "Black";

                    cxt.translate(250, 250);

                    cxt.rotate(min * 6 * Math.PI / 180);

                    cxt.moveTo(0, -130);

                    cxt.lineTo(0, 10);

                    cxt.stroke();

                    cxt.restore();

                    cxt.closePath();
cxt.beginPath();

                    cxt.save();

                    cxt.lineWidth = 3;

                    cxt.strokeStyle = "red";

                    cxt.fillStyle = "Black";

                    cxt.translate(250, 250);

                    cxt.rotate(sec * 6 * Math.PI / 180);//秒

                    cxt.moveTo(0, 150);

                    cxt.lineTo(0, -15);

                    cxt.stroke();
cxt.beginPath();

                    cxt.arc(0, 0, 5, 0, 360, false);

                    cxt.fillStyle = "gray";

                    cxt.strokeStyle = "red";

                    cxt.fill();

                    cxt.closePath();
cxt.beginPath();

                    cxt.arc(0, 130, 5, 0, 360, false);

                    cxt.fillStyle = "black";

                    cxt.strokeStyle = "red";

                    cxt.fill();

                    cxt.stroke();
cxt.restore();

                    cxt.closePath();
}

                DrawClock();

                setInterval(DrawClock, 1000);
</script>

        </div>

需要注意的几个常见的方法

1. closePath,beginPath(),用路径画图的时候，需要注意在各个，打开路径，关闭路径

2. 在做旋转的时候要注意设置原点，translate(250,250);

HTM5制作的闹钟,布布扣,bubuko.com