Content
[TOC]
apple watch原图欣赏
莫名其妙的好看有不！
于是我就想着用js写写看，能否简单的实现这个效果，于是就真的实现了一个很简单（简陋）的效果。
图片预览一下：
p5.js
想要实现上述的简单效果用原生的canvas绘图API也不难实现，但是从实现这个效果来讲，我选用了 p5.js 这个js动画库。可以帮助你以优雅的方式实现这个效果。将注意力集中在实现效果上，而不是各种偏底层API的调用问题上。
CodePen预览
Demo很多瑕疵，欢迎fork修改、自由创作、使优秀…
代码
代码部分其实很简单，根据注释稍微看看就能明白，大致分为：
- 得到当前时间
- 小时（注意24进制和表盘的12进制）
- 分钟
- 秒（我这里其实是获取的毫秒，为了平滑秒针的运动）
- 将时间映射(map)到角度
- 调用p5.js的绘图API，传入角度等参数
- p5.js利用canvas绘制动画
注意
在p5.js的绘图函数arc()中，有个bug
arc(x, y, xd, yd, start_angle, end_angle);在这个函数中当start_angle == end_angle时会有一个bug，特定的我测试当start_angle == end_angle == -PI/2时会绘制一个半圆，但是显然这是不对的，当start_angle == end_angle时，我们应该什么都不绘制。
后来我到官方github仓库上，发现一个issue提到的就是关于这个问题。
最后我修改了映射区间避免了start_angle == end_angle == 0,从0 -> 360 改为 1 -> 360
secondsAngle = map(secondes, 0, 60 * 1000, 1, 360);
minitesAngle = map(minites, 0, 60, 1, 360);
hoursAngle = map(hours % 12, 0, 12, 1, 360);最后等我写完了我才发现，这东西看不了时间，一看官方也不是用来看时间用的—.—