HTM5制作的闹钟

浏览数：16 / 时间：2015年06月09日

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>