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

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

花韻仙語

发布： 2025-10-27 08:28:06

原创

987人浏览过

使用html canvas创建动态模拟时钟

本文档将指导你如何使用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: 绘制静态时钟表面

凹凸工坊-AI手写模拟器

AI手写模拟器，一键生成手写文稿

359

查看详情

在 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中，可以提高代码的可维护性和性能。

以上就是使用HTML Canvas创建动态模拟时钟的详细内容，更多请关注php中文网其它相关文章！