<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas 时钟转动</title>
</head>
<body>
<!-- 实现思路：
1、找到canvas的中心，画出表盘
2、根据当前时间计算角度，画出时针，分针，秒针，和刻度
3、使用定时器，每过一秒获取新的时间，并重新绘图，达到时钟转动的效果 -->
<canvas id="canvas" width="600" height="600"></canvas>
<script>
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
function drawClock() {
context.save();
context.clearRect(0, 0, 600, 600); //每次更新视图的时候都要把上一次的画布清除，再开始画新的视图
context.translate(300,300); // 设置中心点，此时300，300变成了坐标的0，0
context.rotate(-Math.PI/2); //将坐标轴逆时针旋转90度，x轴正方向对准12点方向
context.save();
// 画表盘
context.beginPath();
context.arc(0, 0, 100, 0, 2 * Math.PI);
context.stroke();
context.closePath();
// 时针刻度
context.lineWidth = 5;
for(let i = 0; i < 12; i++) {
context.rotate(2 * Math.PI / 12);
context.beginPath();
context.moveTo(100, 0);
context.lineTo(85,0);
context.stroke();
context.closePath();
}
context.restore();
context.save();
// 分针刻度
context.lineWidth = 1
for (let i = 0; i < 60; i++) {
context.rotate(2 * Math.PI / 60);
context.beginPath();
context.moveTo(100, 0);
context.lineTo(90, 0);
context.stroke();
context.closePath();
}
context.restore();
context.save();
// 获取当前 时，分，秒
let time = new Date();
let hour = time.getHours() % 12; //将24小时转换为12小时
let min = time.getMinutes();
let sec = time.getSeconds();
// 时针
context.lineWidth = 5;
context.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 12 * (min / 60));
context.beginPath();
context.moveTo(0, 0);
context.lineTo(50, 0);
context.stroke();
context.closePath();
context.restore(); // 恢复成上一次save的状态
context.save(); // 恢复完再保存一次
//分针
context.lineWidth = 3;
context.rotate(2 * Math.PI / 60 * min + 2 * Math.PI / 60 * (sec / 60));
context.beginPath();
context.moveTo(0, 0);
context.lineTo(70, 0);
context.stroke();
context.closePath();
context.restore();
context.save();
//秒针
context.lineWidth = 1;
context.rotate(2 * Math.PI / 60 * sec);
context.beginPath();
context.moveTo(0, 0);
context.lineTo(90, 0);
context.stroke();
context.closePath();
context.restore();
context.restore();
}
//使用setinterval();让时钟动起来
setInterval(drawClock,1000);
</script>
</body>
</html>
