HTM5制作的闹钟

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

效果图如下

HTM5制作的闹钟

 
HTM5制作的闹钟
  <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>
HTM5制作的闹钟

 

需要注意的几个常见的方法
1. closePath,beginPath(),用路径画图的时候,需要注意在各个,打开路径,关闭路径
2. 在做旋转的时候要注意设置原点,translate(250,250);
 
 

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

HTM5制作的闹钟

上一篇:css引入外部样式


下一篇:关于管局对个人网站备案的要求