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);
複製程式碼