使用 HTML Canvas 创建动态时钟_技术教程_奈瑶·映南科技互联网学院

本文档将指导你如何使用 HTML Canvas 元素创建一个动态的模拟时钟。我们将探讨如何绘制表盘、数字，以及时针、分针和秒针，并解决如何清除上一秒指针轨迹的问题，最终实现一个流畅运行的时钟。我们将采用双Canvas叠加的方式，避免使用 globalCompositeOperation 的复杂性，从而更高效地实现动态效果。

创建 Canvas 元素

首先，在 HTML 文件中创建两个 Canvas 元素。第一个 Canvas 用于绘制静态的时钟表盘，包括圆形边框、中心点和数字。第二个 Canvas 将覆盖在第一个 Canvas 之上，用于绘制动态的时针、分针和秒针。通过这种方式，我们可以只清除第二个 Canvas 来更新指针的位置，而无需重新绘制整个时钟。




    Analog Clock

注意：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);