對於H5來說,canvas可以說是它最有特色的一個地方了,有了它之後我們可以隨意的在網頁上畫各種各樣的圖形,做一些小遊戲啊什麼的。 canvas這個標籤的用法,在網路上也有特別多的教學了,這裡就不作介紹了。今天我們就用canvas來做一個小小的時鐘。完整的程式碼在這裡https://github.com/wwervin72/HTML5-Clock。
那麼首先在這個頁麵我使用了兩個canvas,一個用來繪製靜態的時鐘錶盤和刻度,另一個用來繪製時鐘的三個指針,然後用定位讓他們重合在一起。然後這裡沒什麼好說的,下面附上程式碼。
1 2 3 4 5 6 |
|
1 2 3 4 5 6 7 8 9 |
|
到了這裡準備工作就做完了,下面就準備要繪製時鐘了。我先定義了一個繪製時鐘錶盤的建構子。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
|
這裡最重要的部分就應該是獲得刻度和數字繪製的座標了。我把繪製刻度的起始點放在了錶盤的邊緣上,然後從錶盤的半徑上減去刻度的長度,就可以得到刻度終點的位置,然後利用角度和三角函數得到兩個點的座標。最後就可以繪製出錶盤的刻度了。下面畫出錶盤上的數字也是一樣的方法。我這裡吧錶盤的中心放在了(200,200)這裡位置。到了這裡我們就已經繪製好了一個靜態的時鐘錶盤。
下面我又定義了一個繪製時脈指標的建構子。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
|
這裡有兩個地方需要說一下:1、在我們獲得當前時間的的毫秒數,然後轉換為小時的時候,對24取模計算出當天的小時數的時候,這裡需要加上8。2、如果想要使用lineCap這個屬性嗎,那麼上面設定路徑的時候,不要用closePath()。
到了這裡我們還需要一個來繪製指針的方法,並且讓指針看起來能夠轉動:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
下面附上該時鐘的圖片:
以上就是本文的全部內容,希望對大家的學習有所幫助。