本文将指导你如何使用 HTML Canvas 和 JavaScript 创建一个动态的模拟时钟。核心思路是利用 Canvas 绘制时钟的表盘和指针，并通过 JavaScript 的 `setInterval` 函数定时更新指针的位置，实现时钟的动态效果。文章将重点介绍如何清除上一秒的指针轨迹，避免画面重叠，确保时钟的清晰显示。
1. HTML 结构和 Canvas 初始化
首先，我们需要在 HTML 文件中创建一个 Canvas 元素，并设置其宽度、高度和样式。同时，我们需要引入 JavaScript 代码来控制 Canvas 的绘制。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Analog Clock</title>
<style>
body {
background-color: #3d3d3b;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
canvas {
background-color: #3d3d3b;
}
</style>
</head>
<body>
<canvas id="clockCanvas" width="500" height="500"></canvas>
<script src="script.js"></script>
</body>
</html>2. JavaScript 代码实现
在 script.js 文件中，我们将编写 JavaScript 代码来绘制时钟的表盘和指针，并实现动态更新。
// 获取 Canvas 元素
const canvas = document.getElementById('clockCanvas');
const ctx = canvas.getContext('2d');
// 定义时钟半径
const radius = canvas.height / 2 * 0.9;
// 初始化时钟
function initClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawCenter(ctx);
drawTime(ctx, radius);
}
// 绘制时钟表盘
function drawFace(ctx, radius) {
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, radius * 0.1, 0, 2 * Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
ctx.beginPath();
ctx.lineWidth = radius * 0.05;
ctx.stroke();
}
// 绘制时钟数字
function drawNumbers(ctx, radius) {
ctx.font = "40px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="center";
for (let i = 1; i < 13; i++) {
ctx.fillText(i.toString(), canvas.width / 2 + Math.sin(i * Math.PI / 6) * radius * 0.8, canvas.height / 2 - Math.cos(i * Math.PI / 6) * radius * 0.8);
}
}
// 绘制时钟中心点
function drawCenter(ctx) {
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, 5, 0, 2 * Math.PI);
ctx.fillStyle = '#000';
ctx.fill();
}
// 绘制时钟指针
function drawTime(ctx, radius){
const now = new Date();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.05);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.03);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.01);
}
// 绘制指针的通用函数
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(canvas.width / 2, canvas.height / 2);
ctx.lineTo(canvas.width / 2 + Math.sin(pos) * length, canvas.height / 2 - Math.cos(pos) * length);
ctx.stroke();
}
// 更新时钟
function updateClock() {
// 清除 Canvas 内容
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawCenter(ctx);
drawTime(ctx, radius);
}
// 每秒更新时钟
setInterval(updateClock, 1000);
// 初始绘制时钟
initClock();3. 解决指针轨迹重叠问题
在上述代码中，我们使用 ctx.clearRect() 方法来清除 Canvas 的内容，从而避免指针轨迹重叠。ctx.clearRect(0, 0, canvas.width, canvas.height) 会清除整个 Canvas 区域，确保每次绘制都是全新的。
立即学习“前端免费学习笔记（深入）”；
4. 代码解释
- ctx.clearRect(0, 0, canvas.width, canvas.height): 此方法用于清除 Canvas 画布上的指定矩形区域。参数分别是矩形左上角的 x 坐标、y 坐标、矩形的宽度和高度。在这里，我们清除整个画布，以便重新绘制每一帧，从而消除旧指针的痕迹。
- setInterval(updateClock, 1000): 此函数设置一个定时器，每隔 1000 毫秒（1 秒）调用 updateClock 函数。updateClock 函数负责清除画布、绘制表盘和指针，从而实现时钟的动态效果。
- drawTime(ctx, radius): 此函数负责计算并绘制时针、分针和秒针的位置。它首先获取当前时间，然后根据时间计算出每个指针应该旋转的角度。最后，调用 drawHand 函数来绘制指针。
- drawHand(ctx, pos, length, width): 这是一个通用的函数，用于绘制指针。它接受上下文对象 ctx、指针的角度 pos、指针的长度 length 和指针的宽度 width 作为参数。它使用 ctx.moveTo 和 ctx.lineTo 方法来绘制一条线段，表示指针。
5. 总结
通过以上步骤，我们成功地使用 HTML Canvas 和 JavaScript 创建了一个动态的模拟时钟。核心在于使用 ctx.clearRect() 方法清除 Canvas 内容，避免指针轨迹重叠，以及使用 setInterval() 函数定时更新时钟。你可以根据自己的需求修改代码，例如改变时钟的颜色、样式和大小，使其更符合你的喜好。
