Canvas案例-炫酷的數字時鐘

引言

本人第一次發帖，有什麼不妥之處還望你們包涵（有什麼想法或者意見均可以在評論區留言），好了廢話很少說，看下我要介紹的東西。

案例介紹

炫酷的數字時鐘，使用canvas繪製，這個案例來源於B站一個視頻，可是實現思路徹底是本身摸索的，效果以下圖

知識點

案例涉及的東西不是特別多，我大體羅列下：

• canvas的基本使用，繪製圓

• 動畫中的requestAnimationFrame與定時器

• 按位運算與數組構建模型

• 如何模擬物理效果（加速度，阻力，碰撞檢測）

• js面向對象OOP

要掌握的東西很少，可是其中的思路仍是尤其重要的。

案例中的對象

此案例的對象有如下：

• Ball 僅指頁面中的小球，該對象包含了ball的全部運動和狀態參數，如：位置、速度、顏色等

• Tile 每個數字塊就是一個Tile實例，呈現一個數字0-9

• Chunk 一個Chunk實例包涵兩個Tile對象，呈現兩位數字，

• Sence 負責整個頁面的，好比頁面的刷新，頁面顯示的調試信息等

實現思路

案例其實就是普通的時鐘邏輯 + 七段數顯 + 小球的物理特性

感興趣的能夠本身作作，後期我會分段詳細的介紹

參考

用Canvas繪製炫麗的倒計時效果

計劃

• - [x] Ball對象及如何模擬物理效果

• - [ ] Tile對象及如何構建數字塊

• - [ ] Chunk，Scene及對象及總體的實現