天天看點

基于Canvas的時鐘

效果比較簡單,沒有放滿各個時刻(網上這類例子很多)

基于Canvas的時鐘

這裡有一點取巧:畫完外圈圓、内圈圓後,将原點(預設為0,0)轉換為圓的中心點,這樣的話,隻需要知道角度,在已知時針、分針、秒針它的長度情況下,很容易求出對應的坐标(x, y)

基于Canvas的時鐘

在求的時候需要注意的是,先要将得到的弧度 – 1/2*Math.PI,以時針為例,一圈分為12個刻度,那麼1個小時對應的弧度為 hour * 30 * Math.PI / 180 – 1/2*Math.PI。

完整的示例代碼:

線上運作示例:

Canvas Clock

您目前使用的浏覽器不支援Canvas

繼續閱讀