使用 HTML5 Canvas 打造炫酷的数字时钟动画
在 Web 开发中，HTML5 的 canvas 元素为我们带来了强大的绘图能力，结合 JavaScript，可以实现各种酷炫的效果。今天，我们将深入剖析一段经典的 彩色数字时钟动画 代码，并理解它是如何通过物理模拟实现数字切换时的炫酷粒子效果。
1. 功能介绍
这段代码的核心功能是：
- 在 HTML5 Canvas 上绘制一个 数字时钟（小时:分钟:秒）。
- 当数字发生变化（比如秒钟跳动），会触发一个 彩色小球掉落动画，模拟重力与弹跳。
- 每个彩色小球有不同的颜色、速度和弹跳系数，形成随机且自然的效果。
最终效果：
- 时钟不断刷新，每次数字切换时，旧数字的点阵转化成彩色小球，自然下落并反弹，酷炫十足！
2. 代码结构概览
代码使用了一个立即执行函数 (function(){ ... })(); 来封装所有逻辑，避免变量污染全局作用域。
主要模块
-
参数定义
var t = 820; // Canvas 宽度 var a = 250; // Canvas 高度 var r = 7; // 每个圆点的半径 var n = 10; // 数字间距 var e = 0.65; // 弹性系数（模拟反弹效果） -
颜色数组
const v = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000" ]; -
数字点阵模板
用二维数组表示每个数字（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],...]// 依次类推 ]; -
核心函数
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