Canvas案例-炫酷的数字时钟

引言

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

案例介绍

炫酷的数字时钟，使用canvas绘制，这个案例来源于B站一个视频，但是实现思路完全是自己摸索的，效果如下图

知识点

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

• canvas的基本使用，绘制圆

• 动画中的requestAnimationFrame与定时器

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

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

• js面向对象OOP

要掌握的东西不多，但是其中的思路还是尤为重要的。

案例中的对象

此案例的对象有以下：

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

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

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

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

实现思路

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

感兴趣的可以自己做做，后期我会分段详细的介绍

参考

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

计划

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

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

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

转载于:https://juejin.im/post/5d006433e51d45775c73dcc1