Canvas案例-炫酷的数字时钟

引言

本人第一次发帖，有什么不妥之处还望你们包涵（有什么想法或者意见均可以在评论区留言），好了废话很少说，看下我要介绍的东西。

案例介绍

炫酷的数字时钟，使用canvas绘制，这个案例来源于B站一个视频，可是实现思路彻底是本身摸索的，效果以下图

知识点

案例涉及的东西不是特别多，我大体罗列下：

• canvas的基本使用，绘制圆

• 动画中的requestAnimationFrame与定时器

• 按位运算与数组构建模型

• 如何模拟物理效果（加速度，阻力，碰撞检测）

• js面向对象OOP

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

案例中的对象

此案例的对象有如下：

• Ball 仅指页面中的小球，该对象包含了ball的全部运动和状态参数，如：位置、速度、颜色等

• Tile 每个数字块就是一个Tile实例，呈现一个数字0-9

• Chunk 一个Chunk实例包涵两个Tile对象，呈现两位数字，

• Sence 负责整个页面的，好比页面的刷新，页面显示的调试信息等

实现思路

案例其实就是普通的时钟逻辑 + 七段数显 + 小球的物理特性

感兴趣的能够本身作作，后期我会分段详细的介绍

参考

用Canvas绘制炫丽的倒计时效果

计划

• - [x] Ball对象及如何模拟物理效果

• - [ ] Tile对象及如何构建数字块

• - [ ] Chunk，Scene及对象及总体的实现