本文档将指导你如何使用html canvas元素和javaScript创建一个动态的模拟时钟。我们将解决清除先前秒针轨迹的问题，并提供一种有效的实现方法，通过叠加canvas和`clearRect()`方法，实现时钟指针的动态更新，从而避免留下残影。
概述
使用HTML Canvas创建模拟时钟是一个常见的练习，可以帮助开发者更好地理解Canvas API和javascript定时器。然而，在实现过程中，一个常见的问题是如何清除先前绘制的指针，以避免在时钟表面留下轨迹。本文将介绍一种使用叠加Canvas元素并结合clearRect()方法来解决此问题的方法。
解决方案：叠加Canvas与clearRect()
globalCompositeOperation 属性通常不适用于清除先前绘制的线条。更有效的解决方案是创建两个Canvas元素：一个用于绘制静态时钟表面，另一个叠加在第一个Canvas之上，用于绘制动态的时钟指针。
步骤 1: 创建两个Canvas元素
立即学习“前端免费学习笔记（深入）”；
首先，创建两个Canvas元素。第一个Canvas (canvas1) 用于绘制时钟的背景，包括表盘、数字等静态元素。第二个Canvas (canvas2) 将覆盖在第一个Canvas之上，用于绘制时钟的指针。
<canvas id="canvas1" width="500" height="500" style="background-color:#3d3d3b;"></canvas> <canvas id="canvas2" width="500" height="500" style="position:absolute; top:0; left:0;"></canvas>
请注意，canvas2 的样式设置为 position: absolute; top: 0; left: 0;，以确保它完全覆盖在 canvas1 之上。
步骤 2: 绘制静态时钟表面
在 canvas1 上绘制静态时钟表面。这包括绘制圆形表盘、中心点、数字等。
var canvas1 = document.getElementById("canvas1"); var ctx1 = canvas1.getContext("2d"); var radius = (canvas1.height / 2) * 0.9; // 绘制白色圆形表盘 ctx1.beginPath(); ctx1.arc(250, 250, radius, 0, 2 * Math.PI); ctx1.fillStyle = "white"; ctx1.fill(); // 绘制中心小圆点 ctx1.beginPath(); ctx1.arc(250, 250, radius * 0.1, 0, 2 * Math.PI); ctx1.fillStyle = '#333'; ctx1.fill(); // 绘制表盘边框 ctx1.beginPath(); ctx1.lineWidth = radius * 0.05; ctx1.stroke(); // 绘制数字 ctx1.font = "40px Georgia"; ctx1.textBaseline = "middle"; ctx1.textAlign = "center"; for (i = 1; i < 13; i++) { ctx1.fillText(i.toString(), 250 + (Math.sin(i * Math.PI / 6) * radius * 0.8), 250 - Math.cos(i * Math.PI / 6) * radius * 0.8); }
步骤 3: 绘制动态时钟指针
获取 canvas2 的上下文，并创建一个 timing 函数来绘制时钟指针。在 timing 函数的开始，使用 clearRect() 方法清除 canvas2 的内容，然后绘制新的时钟指针。
var canvas2 = document.getElementById("canvas2"); var ctx2 = canvas2.getContext("2d"); function timing() { const d = new Date(); // 清除 canvas2 ctx2.clearRect(0, 0, 500, 500); // 绘制秒针 ctx2.beginPath(); ctx2.moveTo(250, 250); ctx2.lineWidth = radius * 0.01; ctx2.lineTo(250 + (Math.sin(d.getSeconds() * Math.PI / 30) * radius * 0.85), 250 - Math.cos(d.getSeconds() * Math.PI / 30) * radius * 0.85); ctx2.stroke(); // 绘制分针 ctx2.beginPath(); ctx2.moveTo(250, 250); ctx2.lineWidth = radius * 0.03; ctx2.lineTo(250 + (Math.sin(d.getMinutes() * Math.PI / 30) * radius * 0.78), 250 - Math.cos(d.getMinutes() * Math.PI / 30) * radius * 0.78); ctx2.stroke(); // 绘制时针 ctx2.beginPath(); ctx2.moveTo(250, 250); ctx2.lineWidth = radius * 0.05; ctx2.lineTo(250 + (Math.sin(d.getHours() * Math.PI / 6) * radius * 0.7), 250 - Math.cos(d.getHours() * Math.PI / 6) * radius * 0.7); ctx2.stroke(); } // 每秒调用 timing 函数 setInterval(timing, 1000);
完整代码示例:
<!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 { border-radius: 50%; } </style> </head> <body> <canvas id="canvas1" width="500" height="500" style="background-color:#3d3d3b;"></canvas> <canvas id="canvas2" width="500" height="500" style="position:absolute; top:0; left:0;"></canvas> <script> var canvas1 = document.getElementById("canvas1"); var ctx1 = canvas1.getContext("2d"); var radius = (canvas1.height / 2) * 0.9; // 绘制白色圆形表盘 ctx1.beginPath(); ctx1.arc(250, 250, radius, 0, 2 * Math.PI); ctx1.fillStyle = "white"; ctx1.fill(); // 绘制中心小圆点 ctx1.beginPath(); ctx1.arc(250, 250, radius * 0.1, 0, 2 * Math.PI); ctx1.fillStyle = '#333'; ctx1.fill(); // 绘制表盘边框 ctx1.beginPath(); ctx1.lineWidth = radius * 0.05; ctx1.stroke(); // 绘制数字 ctx1.font = "40px Georgia"; ctx1.textBaseline = "middle"; ctx1.textAlign = "center"; for (i = 1; i < 13; i++) { ctx1.fillText(i.toString(), 250 + (Math.sin(i * Math.PI / 6) * radius * 0.8), 250 - Math.cos(i * Math.PI / 6) * radius * 0.8); } var canvas2 = document.getElementById("canvas2"); var ctx2 = canvas2.getContext("2d"); function timing() { const d = new Date(); // 清除 canvas2 ctx2.clearRect(0, 0, 500, 500); // 绘制秒针 ctx2.beginPath(); ctx2.moveTo(250, 250); ctx2.lineWidth = radius * 0.01; ctx2.lineTo(250 + (Math.sin(d.getSeconds() * Math.PI / 30) * radius * 0.85), 250 - Math.cos(d.getSeconds() * Math.PI / 30) * radius * 0.85); ctx2.stroke(); // 绘制分针 ctx2.beginPath(); ctx2.moveTo(250, 250); ctx2.lineWidth = radius * 0.03; ctx2.lineTo(250 + (Math.sin(d.getMinutes() * Math.PI / 30) * radius * 0.78), 250 - Math.cos(d.getMinutes() * Math.PI / 30) * radius * 0.78); ctx2.stroke(); // 绘制时针 ctx2.beginPath(); ctx2.moveTo(250, 250); ctx2.lineWidth = radius * 0.05; ctx2.lineTo(250 + (Math.sin(d.getHours() * Math.PI / 6) * radius * 0.7), 250 - Math.cos(d.getHours() * Math.PI / 6) * radius * 0.7); ctx2.stroke(); } // 每秒调用 timing 函数 setInterval(timing, 1000); </script> </body> </html>
总结
通过使用叠加的Canvas元素和clearRect()方法，我们可以有效地清除先前绘制的时钟指针，从而创建一个动态且清晰的模拟时钟。这种方法避免了使用 globalCompositeOperation 属性的复杂性，并提供了一种更直接和可控的解决方案。记住，将静态元素和动态元素分离到不同的Canvas中，可以提高代码的可维护性和性能。