本文档将指导你如何使用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中，可以提高代码的可维护性和性能。
