时间戳

首页 > 解决方案 > 带有 HTML5 的 LED 时钟动画

javascript - 带有 HTML5 的 LED 时钟动画

问题描述

我正在使用 HTML5 CANVAS 创建一个点状 LED 时钟。我对第二个点的动画有疑问。当下面的代码运行时，脚本会读取当前时间，计算秒数并绘制相应数量的点。当秒数过去时，它应该绘制新的点，当下一分钟开始时，它应该清除之前绘制的所有第二个点，而是绘制相同的点图案并且它们的数量已经在开始时读取。有人知道如何修复动画吗？

这是第二个点动画的样子。

HTML：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <script async="" src="tex2.js"></script>
        <canvas id="clock" width="1200" height="675" style="background-color: #000000">
            Your browser doesn't support CANVAS tag.
        </canvas>
    </body>
</html>

JS：

/*eslint-env browser*/
/*jslint browser:true */

var clock = document.getElementById("clock"),
    face = clock.getContext("2d"),
    height = 1200,
    width = 675,
    marg = 80,
    dotRadius = 8,
    faceRadius = (width - marg) / 2,
    angle,
    i,
    x,
    y,
    time = new Date(),
    secs = time.getSeconds();
function drawFace() {
    'use strict';
    face.fillStyle = "#FF0000";
    for (i = 0; i <= secs; i = i + 1) {
        angle = i * (Math.PI / 30) + Math.PI * -0.5;
        x = Math.cos(angle) * faceRadius + height / 2;
        y = Math.sin(angle) * faceRadius + width / 2;
        face.beginPath();
        face.arc(x, y, dotRadius, 0, 2 * Math.PI);
        face.fill();
        face.closePath();
    }
    face.fill();
    window.requestAnimationFrame(drawFace);
}
function drawAll() {
    'use strict';
    window.requestAnimationFrame(drawFace);
    drawFace();
}

drawAll();

标签： javascripthtmlanimationcanvas

解决方案

推荐阅读