在 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