HTML5 - 另一个时钟
<!DOCTYPE html><html lang="en" xmlns="http://www.
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas width="500" height="500" id="clock"></canvas>
<script>
function drawClock() {
var cxt = document.getElementById('clock').getContext('2d'),
i = 0,
now = new Date(),
sec = now.getSeconds(),
min = now.getMinutes(),
hour = (now.getHours() % 12) + min / 60;
cxt.clearRect(0, 0, 500, 500);
cxt.lineWidth = 10;
cxt.strokeStyle = 'rgba(0,0,255,0.6)';
cxt.beginPath()
cxt.strokeRect(50, 50, 400, 400);
//cxt.arc(250, 250, 200, 0, 360, false);
cxt.closePath();
cxt.stroke();
//绘制表盘
cxt.strokeStyle = 'rgba(0,0,0,0.6)';
for (i = 1; i <= 60; i++) {
cxt.save();
if (i % 5 == 0) {
cxt.lineWidth = 7;
}
else {
cxt.lineWidth = 4;
}
cxt.translate(250, 250);
cxt.rotate(i * Math.PI / 30);
cxt.beginPath();
if (i % 5 == 0) {
cxt.moveTo(0, -170);
cxt.font = '18px 黑体';
cxt.lineWidth = 1;
cxt.strokeText((i / 5), -6, -150);
cxt.lineWidth = 7;
}
else {
cxt.moveTo(0, -180);
}
cxt.lineTo(0, -190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//绘制时针
cxt.save();
cxt.lineWidth = 7;
cxt.strokeStyle = 'rgb(0,0,0)';
cxt.translate(250, 250);
cxt.rotate(hour * Math.PI / 6);
cxt.beginPath();
cxt.moveTo(0, -110);
cxt.lineTo(0, 10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//绘制分针
cxt.save();
cxt.lineWidth = 5;
cxt.strokeStyle = 'rgb(0,0,0)';
cxt.translate(250, 250);
cxt.rotate(min * Math.PI / 30);
cxt.beginPath();
cxt.moveTo(0, -130);
cxt.lineTo(0, 15);
cxt.closePath();
cxt.stroke();
cxt.restore();
//绘制秒针
cxt.save();
cxt.lineWidth = 2;
cxt.strokeStyle = 'rgb(255,0,0)';
cxt.translate(250, 250);
cxt.rotate(sec * Math.PI / 30);
cxt.beginPath();
cxt.moveTo(0, -150);
cxt.lineTo(0, 20);
cxt.closePath();
cxt.stroke();
//绘制时针、分针、秒针的交叉点
cxt.beginPath();
cxt.arc(0, 0, 6, 0, 360, false);
cxt.closePath();
cxt.fillStyle = 'rgba(150,150,150,1)';
cxt.fill();
cxt.stroke();
//设置秒针的尖端的小原点
cxt.beginPath();
cxt.arc(0, -130, 5, 0, 360, false);
cxt.closePath();
cxt.fillStyle = 'rgba(150,150,50,1)';
cxt.fill();
cxt.stroke();
cxt.restore();
}
drawClock();
setTimeout(function () {
drawClock()
setTimeout(arguments.callee, 1000);
}, 1000);
</script>
</body>
</html>
