<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" width="500" height="500" style=""></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
function drawClock() {
context.clearRect(0, 0, 500, 500);
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hours = now.getHours();
//小时必须获取浮点类型 (小时+分钟/60)
hours = hours + min / 60;
var hours = hours > 12 ? hours - 12 : hours;
context.lineWidth = 1;
context.strokeStyle = 'blue';
context.beginPath();
context.arc(250, 250, 200, 0, 360, false);
context.closePath();
context.stroke();
for (var i = 0; i < 60; i++) {
context.save();
context.beginPath();
context.lineWidth = 3;
context.strokeStyle = '#00aac5';
context.translate(250, 250);
context.rotate((i * 6 * Math.PI) / 180);
context.moveTo(0, -180);
context.lineTo(0, -190);
context.closePath();
context.stroke();
context.restore();
}
for (var i = 0; i < 12; i++) {
//保存当前环境的状态
context.save();
context.lineWidth = 7;
context.strokeStyle = '#000';
// 转移原点
context.translate(250, 250);
// 旋转
context.rotate((i * 30 * Math.PI) / 180);
context.beginPath();
context.moveTo(0, -160);
context.lineTo(0, -190);
context.closePath();
context.stroke();
// 返回之前保存过的路径状态和属性
context.restore();
}
// 绘制时针
context.save();
context.lineWidth = 5;
context.strokeStyle = '#000';
context.beginPath();
context.translate(250, 250);
context.rotate((hours * 30 * Math.PI) / 180);
context.moveTo(0, -130);
context.lineTo(0, 10);
context.closePath();
context.stroke();
context.restore();
// 绘制分针
context.save();
context.lineWidth = 3;
context.strokeStyle = '#000';
context.beginPath();
context.translate(250, 250);
context.rotate((min * 6 * Math.PI) / 180);
context.moveTo(0, -140);
context.lineTo(0, 10);
context.closePath();
context.stroke();
context.restore();
// 绘制秒针
context.save();
context.lineWidth = 1;
context.strokeStyle = '#ff0000';
context.beginPath();
context.translate(250, 250);
context.rotate((sec * 6 * Math.PI) / 180);
context.moveTo(0, -160);
context.lineTo(0, 15);
context.closePath();
context.stroke();
context.restore();
}
// 1s 画一次并清除上一次图案
setInterval(drawClock, 1000);
</script>
</body>
</html>