<!DOCTYPE html >
<html>
<head>
</head>
<body>
<canvas id="clock" width=" 500" height=" 500">
您的浏览器暂时不支持canvas标签，无法看到时钟！
</canvas>
<script type="text/javascript">
var clock = document.getElementById("clock");
var cxt = clock.getContext('2d');
function drawClock() {
cxt.clearRect(0, 0, 500, 500);
var now = new Date();
var sec = now.getSeconds();
var mi = now.getMinutes();
var hour = now.getHours();
hour = hour > 12 ? hour - 12 : hour;
hour = hour + mi / 60;
//画表盘
cxt.lineWidth = 13;
cxt.strokeStyle = "blue";
cxt.beginPath();
cxt.arc(250, 250, 200, 0, 360, false);
cxt.closePath();
cxt.stroke();
//刻度
//时刻度
for (var i = 0; i < 12; i++) {
cxt.save();
//设置时针刻度的粗细
cxt.lineWidth = 7;
//设置时针刻度的颜色
cxt.strokeStyle = "#000";
//先设置0,0点
cxt.translate(250, 250);
cxt.rotate(i * 30 * Math.PI / 180); //角度*Math/180=弧度
cxt.beginPath();
cxt.moveTo(0, -170);
cxt.lineTo(0, -190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//秒刻度
for (var i = 0; i < 60; i++) {
cxt.save();
cxt.lineWidth = 3;
cxt.strokeStyle = "#000";
cxt.translate(250, 250);
cxt.rotate(i * 6 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -180);
cxt.lineTo(0, -190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//时针
cxt.save();
cxt.lineWidth = 7;
cxt.strokeStyle = "#000";
cxt.translate(250, 250);
cxt.rotate(hour * 30 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -140);
cxt.lineTo(0, 10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
cxt.lineWidth = 5;
cxt.strokeStyle = "#000";
cxt.translate(250, 250);
cxt.rotate(mi * 6 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -160);
cxt.lineTo(0, 15);
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒针
cxt.save();
cxt.lineWidth = 3;
cxt.strokeStyle = "red";
cxt.translate(250, 250);
cxt.rotate(sec * 6 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -170);
cxt.lineTo(0, 20);
cxt.closePath();
cxt.stroke();
//画出时针，分针，秒针的交叉点
cxt.beginPath();
cxt.arc(0, 0, 5, 0, 360, false);
cxt.closePath();
cxt.fillStyle = "gray";
cxt.fill();
cxt.stroke();
//画出时针，分针，秒针的交叉点
cxt.beginPath();
cxt.arc(0, -140, 3, 0, 360, false);
cxt.closePath();
cxt.fillStyle = "gray";
cxt.fill();
cxt.stroke();
cxt.restore();
}
drawClock();
window.setInterval(drawClock, 1000);
</script>
</body>
</html>