使用 HTML Canvas 创建动态模拟时钟

本文将指导你如何使用 HTML Canvas 和 JavaScript 创建一个动态的模拟时钟。核心思路是利用 Canvas 绘制时钟的表盘和指针，并通过 JavaScript 的 `setInterval` 函数定时更新指针的位置，实现时钟的动态效果。文章将重点介绍如何清除上一秒的指针轨迹，避免画面重叠，确保时钟的清晰显示。

1. HTML 结构和 Canvas 初始化

首先，我们需要在 HTML 文件中创建一个 Canvas 元素，并设置其宽度、高度和样式。同时，我们需要引入 JavaScript 代码来控制 Canvas 的绘制。

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() 函数定时更新时钟。你可以根据自己的需求修改代码，例如改变时钟的颜色、样式和大小，使其更符合你的喜好。