2013年10月3日 星期四

[筆記]用canvas來畫簡單的時鐘

這個超陽春的時鐘範例,只有秒針在跑,藉此說明canvas的api。

先在<body>區塊中加入一個canvas元素,以及一個div區塊,顯示時間:
您的瀏覽器不支援Canvas
然後加入下列javascript的程式碼:

最後在body onload時,呼叫相關的方法:
onload="init();startTime()"

這裡要注意的是ctx.rotate這個方法,用來控制秒針的角度,請參考API。 另外,秒指向的數字,和畫面顯示的時間會有一點落差,要準卻的話,可以直接把init方法中的初始狀態,直接寫到rotate方法中。 若要實現更美的時鐘,可以先放一張背景圖在canvas上。

沒有留言: