HTM5製作的鬧鐘

標籤：style   class   blog   c   code   java   

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);