使用 HTML Canvas 创建动态时钟-html教程-PHP中文网

使用 HTML Canvas 创建动态时钟

聖光之護

发布： 2025-10-26 11:16:24

原创

479人浏览过

使用 html canvas 创建动态时钟

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

创建 Canvas 元素

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

<!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 {
            position: absolute; /* 关键：允许Canvas叠加 */
        }
    </style>
</head>
<body>
    <canvas id="clockFace" width="500" height="500"></canvas>
    <canvas id="clockHands" width="500" height="500"></canvas>
    <script src="script.js"></script>
</body>
</html>

登录后复制

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

登录后复制

绘制静态时钟表盘：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

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);

登录后复制