your broswer can not see the clock

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 = newImage();

image.src= "1.png";

cxt.drawImage(image,220, 280, 100, 100);var now = newDate();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);

總結

以上是生活随笔為你收集整理的用html5制作闹钟,HTM5制作的闹钟的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。