基本動畫的步驟 basic animation steps
用canvas畫一幀動畫，通常需要以下四個步驟：
1. 清空 canvas
除非接下來要畫的內容會完全充滿 canvas （例如背景圖），否則你需要清空所有。最簡單的做法就是用 clearrect 方法。
2. 儲存 canvas 狀態
如果你要改變一些會改變 canvas 狀態的設定（樣式，變形之類的），又要在每畫一幀之時都是原始狀態的話，你需要先儲存一下。
3. 繪製動畫圖形（animated shapes）
這一步才是重繪動畫幀。
4. 恢復 canvas 狀態
如果已經儲存了 canvas 的狀態，可以先恢復它，然後重繪下一幀。
在操作動畫過程中，我們需要一些可以定時執行重繪的方法。有兩種方法可以實現這樣的動畫操控：
第一種方法：可以通過 setinterval 和 settimeout 方法來控制在設定的時間點上執行重繪。
第二種方法：我們可以利用使用者輸入來實現操控。如果需要做乙個遊戲，我們可以通過監聽使用者互動過程中觸發的事件（如 keyboard，mouse）來控制動畫效果。
下面是用第一種方法實現的乙個時鐘動畫：
it's a clock here
HTML5 canvas 繪製圓形
canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法，方法定義如 arc x,y,radius,startangle,endangle,countercl...
HTML5 canvas擦除無效
部分安卓手機上會出現canvas內圖表重疊，並且清除無效，屬於偶現缺陷，非常難以確定其產生原因，比如下圖這個樣子，第一次繪製的圖形沒有擦除，導致第二次繪製時出現重影 初步考慮為裝置自身問題，引起canvasapi的context.clearrect執行無效。在經過一些嘗試之後，發現在每次擦除 cle...
HTML5canvas時鐘例項
直接放 不太好，還是簡單說說運用到的canvas知識 1 canvas 元素用於在網頁上繪製圖形。id c width 1000 height 400 canvas 2 canvas2d環境下繪製 var ogc oc.getcontext 2d 3 我要開始繪製路徑啦 ogc.begin path...