本文档将指导你如何使用 html canvas 元素创建一个动态的模拟时钟。我们将探讨如何绘制表盘、数字，以及时针、分针和秒针，并解决如何清除上一秒指针轨迹的问题，最终实现一个流畅运行的时钟。我们将采用双canvas叠加的方式，避免使用 globalCompositeOperation 的复杂性，从而更高效地实现动态效果。
创建 Canvas 元素
首先，在 HTML 文件中创建两个 Canvas 元素。第一个 Canvas 用于绘制静态的时钟表盘，包括圆形边框、中心点和数字。第二个 Canvas 将覆盖在第一个 Canvas 之上，用于绘制动态的时针、分针和秒针。通过这种方式，我们可以只清除第二个 Canvas 来更新指针的位置，而无需重新绘制整个时钟。
<!DOCTYPE html> <html> <head> <title>Analog Clock</title> <style> body { background-color: #3d3d3b; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } canvas { position: absolute; /* 关键：允许Canvas叠加 */ } </style> </head> <body> <canvas id="clockFace" width="500" height="500"></canvas> <canvas id="clockHands" width="500" height="500"></canvas> <script src="script.js"></script> </body> </html>
注意：canvas 元素的 position: absolute 样式是关键，它允许两个 Canvas 元素重叠。
javaScript 代码实现
接下来，编写 javascript 代码来绘制时钟。代码主要分为以下几个部分：
立即学习“前端免费学习笔记（深入）”；
-
获取 Canvas 元素和上下文：
const clockFaceCanvas = document.getElementById('clockFace'); const clockHandsCanvas = document.getElementById('clockHands'); const clockFaceCtx = clockFaceCanvas.getContext('2d'); const clockHandsCtx = clockHandsCanvas.getContext('2d'); const radius = (clockFaceCanvas.height / 2) * 0.9; -
绘制静态时钟表盘：
function drawClockFace() { clockFaceCtx.beginPath(); clockFaceCtx.arc(250, 250, radius, 0, 2 * Math.PI); clockFaceCtx.fillStyle = "white"; clockFaceCtx.fill(); clockFaceCtx.beginPath(); clockFaceCtx.arc(250, 250, radius * 0.1, 0, 2 * Math.PI); clockFaceCtx.fillStyle = '#333'; clockFaceCtx.fill(); clockFaceCtx.beginPath(); clockFaceCtx.lineWidth = radius * 0.05; clockFaceCtx.stroke(); clockFaceCtx.font = "40px Georgia"; clockFaceCtx.textBaseline = "middle"; clockFaceCtx.textAlign = "center"; for (let i = 1; i < 13; i++) { clockFaceCtx.fillText(i.toString(), 250 + (Math.sin(i * Math.PI / 6) * radius * 0.8), 250 - Math.cos(i * Math.PI / 6) * radius * 0.8); } } -
绘制动态时针、分针和秒针：
function drawClockHands() { const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const seconds = now.getSeconds(); // Clear the overlay canvas clockHandsCtx.clearRect(0, 0, clockHandsCanvas.width, clockHandsCanvas.height); // Draw seconds hand drawHand(clockHandsCtx, seconds * Math.PI / 30, radius * 0.85, radius * 0.01); // Draw minutes hand drawHand(clockHandsCtx, (minutes * Math.PI / 30) + (seconds * Math.PI / (30 * 60)), radius * 0.78, radius * 0.03); // Draw hours hand drawHand(clockHandsCtx, (hours * Math.PI / 6) + (minutes * Math.PI / (6 * 60)) + (seconds * Math.PI / (360 * 60)), radius * 0.7, radius * 0.05); } function drawHand(ctx, angle, length, width) { ctx.beginPath(); ctx.moveTo(250, 250); ctx.lineWidth = width; ctx.lineTo(250 + Math.sin(angle) * length, 250 - Math.cos(angle) * length); ctx.stroke(); } -
设置定时器，每秒更新时钟：
drawClockFace(); // 绘制表盘一次 setInterval(drawClockHands, 1000);
完整的 script.js 代码如下：
const clockFaceCanvas = document.getElementById('clockFace'); const clockHandsCanvas = document.getElementById('clockHands'); const clockFaceCtx = clockFaceCanvas.getContext('2d'); const clockHandsCtx = clockHandsCanvas.getContext('2d'); const radius = (clockFaceCanvas.height / 2) * 0.9; function drawClockFace() { clockFaceCtx.beginPath(); clockFaceCtx.arc(250, 250, radius, 0, 2 * Math.PI); clockFaceCtx.fillStyle = "white"; clockFaceCtx.fill(); clockFaceCtx.beginPath(); clockFaceCtx.arc(250, 250, radius * 0.1, 0, 2 * Math.PI); clockFaceCtx.fillStyle = '#333'; clockFaceCtx.fill(); clockFaceCtx.beginPath(); clockFaceCtx.lineWidth = radius * 0.05; clockFaceCtx.stroke(); clockFaceCtx.font = "40px Georgia"; clockFaceCtx.textBaseline = "middle"; clockFaceCtx.textAlign = "center"; for (let i = 1; i < 13; i++) { clockFaceCtx.fillText(i.toString(), 250 + (Math.sin(i * Math.PI / 6) * radius * 0.8), 250 - Math.cos(i * Math.PI / 6) * radius * 0.8); } } function drawClockHands() { const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const seconds = now.getSeconds(); // Clear the overlay canvas clockHandsCtx.clearRect(0, 0, clockHandsCanvas.width, clockHandsCanvas.height); // Draw seconds hand drawHand(clockHandsCtx, seconds * Math.PI / 30, radius * 0.85, radius * 0.01); // Draw minutes hand drawHand(clockHandsCtx, (minutes * Math.PI / 30) + (seconds * Math.PI / (30 * 60)), radius * 0.78, radius * 0.03); // Draw hours hand drawHand(clockHandsCtx, (hours * Math.PI / 6) + (minutes * Math.PI / (6 * 60)) + (seconds * Math.PI / (360 * 60)), radius * 0.7, radius * 0.05); } function drawHand(ctx, angle, length, width) { ctx.beginPath(); ctx.moveTo(250, 250); ctx.lineWidth = width; ctx.lineTo(250 + Math.sin(angle) * length, 250 - Math.cos(angle) * length); ctx.stroke(); } drawClockFace(); // 绘制表盘一次 setInterval(drawClockHands, 1000);
运行结果
将 HTML 文件和 JavaScript 文件放在同一个目录下，用浏览器打开 HTML 文件，即可看到一个动态的模拟时钟。
总结
本文档介绍了如何使用 HTML Canvas 元素创建一个动态的模拟时钟。通过使用双 Canvas 叠加的方式，我们可以更高效地清除上一秒指针的轨迹，从而实现一个流畅运行的时钟。这种方法避免了使用 globalCompositeOperation 属性的复杂性，使代码更加简洁易懂。
注意事项
- 确保两个 Canvas 元素具有相同的宽度和高度，以便它们完全重叠。
- clearRect() 方法用于清除 Canvas 上的内容。在使用之前，确保上下文已经切换到需要清除的 Canvas。
- 可以根据需要调整时钟的样式，例如颜色、字体和指针的粗细。
- 为了更好的性能，可以考虑使用 requestAnimationFrame() 方法来代替 setInterval() 方法，尤其是在动画帧率要求较高的情况下。