使用 HTML5 Canvas 打造炫酷的数字时钟动画

在 Web 开发中，HTML5 的 canvas 元素为我们带来了强大的绘图能力，结合 JavaScript，可以实现各种酷炫的效果。今天，我们将深入剖析一段经典的 彩色数字时钟动画 代码，并理解它是如何通过物理模拟实现数字切换时的炫酷粒子效果。

1. 功能介绍

这段代码的核心功能是：

• 在 HTML5 Canvas 上绘制一个 数字时钟（小时:分钟:秒）。
• 当数字发生变化（比如秒钟跳动），会触发一个 彩色小球掉落动画，模拟重力与弹跳。
• 每个彩色小球有不同的颜色、速度和弹跳系数，形成随机且自然的效果。

最终效果：

• 时钟不断刷新，每次数字切换时，旧数字的点阵转化成彩色小球，自然下落并反弹，酷炫十足！

2. 代码结构概览

代码使用了一个立即执行函数 (function(){ ... })(); 来封装所有逻辑，避免变量污染全局作用域。

主要模块

1. 参数定义

   var t = 820;  // Canvas 宽度
   var a = 250;  // Canvas 高度
   var r = 7;    // 每个圆点的半径
   var n = 10;   // 数字间距
   var e = 0.65; // 弹性系数（模拟反弹效果）
   

2. 颜色数组

   const v = [
       "#33B5E5","#0099CC","#AA66CC","#9933CC",
       "#99CC00","#669900","#FFBB33","#FF8800",
       "#FF4444","#CC0000"
   ];
   

3. 数字点阵模板
   用二维数组表示每个数字（0-9 以及冒号），例如：

   var u = [
       // 0 的点阵
       [
           [0,0,1,1,1,0,0],
           [0,1,1,0,1,1,0],
           ...
       ],
       // 1 的点阵
       [
           [0,0,0,1,1,0,0],
           ...
       ]
       // 依次类推
   ];
   

4. 核心函数

   • l()：获取当前时间，绘制对应数字，如果数字变化，生成彩色小球。
   • s()：在数字变化时，创建彩色小球。
   • i()：绘制小球。
   • g()：更新小球位置，模拟重力和反弹。
   • m()：绘制数字点阵。

3. 核心逻辑解析

(1) 绘制数字

代码通过点阵数组 u[num]，利用双层循环绘制每个小圆点：

function m(offsetX, offsetY, num, ctx) {
    var matrix = u[num];
    for (var i = 0; i < matrix.length; i++) {
        for (var j = 0; j < matrix[i].length; j++) {
            if (matrix[i][j] == 1) {
                ctx.beginPath();
                ctx.arc(offsetX + r + r * 2 * j, offsetY + r + r * 2 * i, r, 0, 2 * Math.PI);
                ctx.fill();
            }
        }
    }
    return offsetX + matrix[0].length * r * 2;
}

原理：每个数字都是由多个圆点组成，这些圆点根据点阵的 1 来决定是否绘制。

(2) 生成彩色小球

当数字发生变化时，将变化的数字点阵转化为彩色小球对象，并加入数组：

function s(digit) {
    var matrix = u[digit.num];
    for (var i = 0; i < matrix.length; i++) {
        for (var j = 0; j < matrix[i].length; j++) {
            if (matrix[i][j] == 1) {
                var ball = {
                    offsetX: digit.offsetX + r + r * 2 * j,
                    offsetY: 30 + r + r * 2 * i,
                    color: v[Math.floor(Math.random() * v.length)],
                    g: 1.5 + Math.random(),
                    vx: Math.pow(-1, Math.ceil(Math.random() * 10)) * 4 + Math.random(),
                    vy: -5
                };
                o.push(ball);
            }
        }
    }
}

亮点：vx 随机正负，vy 初始向上，g 模拟重力加速度。

(3) 模拟重力与弹跳

每 50ms 更新一次：

function g() {
    var n = 0;
    for (var i = 0; i < o.length; i++) {
        var ball = o[i];
        ball.offsetX += ball.vx;
        ball.offsetY += ball.vy;
        ball.vy += ball.g;

        // 碰到底部，反弹
        if (ball.offsetY > a - r) {
            ball.offsetY = a - r;
            ball.vy = -ball.vy * e; // 乘以弹性系数
        }
        if (ball.offsetX > r && ball.offsetX < t - r) {
            o[n++] = o[i];
        }
    }
    while (o.length > n) {
        o.pop();
    }
}

真实感：小球会掉落、弹起，逐渐停下，最后被移除。

4. 运行使用

把这段代码嵌入 HTML 文件即可运行：

<div class="card-content">
<canvas id="canvas" style="width:97%;" width="820" height="250"></canvas>
<script src="clock.js"></script>
</div>

最终效果：
数字时钟动态更新
数字变化时，彩色小球飞溅，带有物理弹跳效果
非常适合做 网站装饰、Canvas 动画练习

5. 完整代码

完整代码：https://blog.csdn.net/T19900/article/details/150365059