JavaScript案例之时钟
今天本文章分析的是时钟效果，这个案例网上可以说是一搜一大堆，这个案例是之前周末分析源码思路来实现的（没做过该效果，感觉挺不错的就拿来练手了），本案例涉及的技术是Canvas。
就正式进入正题了，该案例的实现效果如下：
上个周末再看相关技术文章，看到一个概念叫做VCD分析法，所谓的VCD分析法是指从view(视图结构)、Controller（控制）、Data（数据）三个方面进行一个案例或项目的分析。
实际上我们在分析一个案例时总是想要理清其构成，然后想一下大概思路以及定义变量来控制具体的效果实现，我认为这就是VCD分析法，从直观到客观，从具体到抽象的延伸过程。
那么对于本案例，我就从结构开始分析：
- 首先最外边是一个圆，暂且称为外圆outer
- 圆内的刻度有形成了另一个圆, 暂且称为内圆inner
- 然后由12个数字以及时分秒指针，每个指针长度不一，时针最短，分针次之，秒针最长
实现思路：
- 外圆outer, 使用Canvas API中arc方法绘制圆，描边调用stroke, 调用lineWidth设置宽度，使用fillText填充1-12文本（要计算好弧度以及坐标点）
- 绘制内圆，实际上是绘制60个填充的圆，然后计算后每个圆的坐标，进行绘制
- 绘制时分秒针，都是绘制直线，将画布的中心点定位到画布中心，设置moveTo、lineTo来设置开始点和结束点，主要是计算指针旋转的弧度rotate方法
- 需要考虑秒针对分针的影响，分针对于时针弧度的影响
- 设置定时器获取当前的时分秒传入相关参数，每一秒刷新下画布
具体的实现代码如下图：
项目最近开始启动了，精力暂时转向工作方面，写前端也要写后台。最近在实践layui富文本编辑器模块，目前已实现绝大部分内容，还有一些需要考虑全面点，不出意外，明天会对富文本编辑器模块进行分析。