p5.js简易实现 apple watch 三色表盘

apple watch原图欣赏

莫名其妙的好看有不！

因而我就想着用js写写看，可否简单的实现这个效果，因而就真的实现了一个很简单（简陋）的效果。

图片预览一下：

p5.js

想要实现上述的简单效果用原生的canvas绘图API也不难实现，可是从实现这个效果来说，我选用了 p5.js 这个js动画库。能够帮助你以优雅的方式实现这个效果。将注意力集中在实现效果上，而不是各类偏底层API的调用问题上。

API查阅

CodePen预览

Demo预览

Demo不少瑕疵，欢迎fork修改、自由创做、使优秀...

代码

代码部分其实很简单，根据注释稍微看看就能明白，大体分为：

1. 获得当前时间

• 小时（注意24进制和表盘的12进制）
• 分钟
• 秒（我这里实际上是获取的毫秒，为了平滑秒针的运动）

2. 将时间映射(map)到角度
3. 调用p5.js的绘图API，传入角度等参数
4. 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);
复制代码

最后等我写完了我才发现，这东西看不了时间，一看官方也不是用来看时间用的—.—