canvas 时钟

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

function drawWatch() {

var x = 100,

y = 100,

r = 80;

// 清除上次的画布:优化性能

oGC.clearRect(0, 0, oC.width, oC.height);

// 日期处理时分秒

var dateT = new Date();

var hour = dateT.getHours();

var min = dateT.getMinutes();

var sec = dateT.getSeconds();

var hourValue =

(-90 + hour * 30 + min / 2) * Math.PI / 180;

var minValue =

(-90 + min * 6) * Math.PI / 180;

var secValue =

(-90 + sec * 6) * Math.PI / 180;

// 表盘--每6°的刻度线

oGC.beginPath();

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

oGC.moveTo(x, y);

oGC.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180);

};

oGC.closePath();

oGC.stroke();

// 覆盖最外圈刻度线

oGC.fillStyle = "white";

oGC.beginPath();

oGC.moveTo(x, y);

oGC.arc(x, y, r * 19 / 20, 0, 360 * Math.PI / 180, false);

oGC.fill();

oGC.closePath();

// oGC.stroke();

// 时针刻度线

oGC.beginPath();

oGC.lineWidth = 3;

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

oGC.moveTo(x, y);

oGC.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180);

};

oGC.closePath();

oGC.stroke();

// 覆盖时针刻度线

oGC.fillStyle = "white";

oGC.beginPath();

oGC.moveTo(x, y);

oGC.arc(x, y, r * 18 / 20, 0, 360 * Math.PI / 180, false);

oGC.fill();

oGC.closePath();

// 时针

oGC.lineWidth = 5;

oGC.beginPath();

oGC.moveTo(x, y);

oGC.arc(x, y, r * 0.6, hourValue, hourValue, false);

oGC.closePath();

oGC.stroke();

// 分针

oGC.lineWidth = 3;

oGC.beginPath();

oGC.moveTo(x, y);

oGC.arc(x, y, r * 0.8, minValue, minValue, false);

oGC.closePath();

oGC.stroke();

// 秒针

oGC.lineWidth = 1;

oGC.beginPath();

oGC.moveTo(x, y);

oGC.arc(x, y, r * 19 / 20, secValue, secValue, false);

oGC.closePath();

oGC.stroke();

};

setInterval(drawWatch, 1000);

drawWatch();

</script>

</html>