使用HTML5的canvas做一個會動的時鐘

這次我們的目标是畫一個會和時間同步的時鐘，不過沒有美學感覺，樣子醜的厲害。

HTML5支援canvas了，我們可以直接在頁面上繪圖了，我看了下canvas和GDI+的接口差不多，是以我們先了解些基本的概念和方式，然後來做一個應用吧。

我們做所有的畫之情需要一個畫布，html的canvas标簽就是幫我們聲明了一個畫布。

這個預設的畫布的大小是300*150，接下來的工作大多就是javaScript來做了。

首先要執行個體化這個畫布

上面的結果你可以得到一個大緻的想法，就是content可以認為是我們将來作畫用的畫筆（估計有專業人士對強烈抗議，我直接忽略），canvas就是我們的畫布。我們現在的畫筆是2D的畫筆，換句話說就是畫平面幾何的畫筆。

接下來，就是我們利用這個畫筆來學習怎麼畫了

各種線

transform，transform的參數比較多，也比較難了解，簡單的說transform是最自由的變形方式，下面給出些參考

組合

我們嘗試寫一圈旋轉的文字，吧上面的知識點合起來看看效果

在具體繪制的時候，定位總是讓我這樣沒有空間感的人感覺痛苦，是以我現在canvas上畫上很多格子，幫助我進行布局

前面的準備工作都完成了，現在我們來綜合下，完成一個具有時分秒的會動的鐘