一：使用快取技術實現預繪製，減少重複繪製canvs內容
很多時候我們在canvas上繪製與更新，總是會保留一些不變的內容，對於這些內容
應該預先繪製快取，而不是每次重新整理。
直接繪製**如下：
context.font="24px arial";
context.fillstyle="blue";
context.filltext("please press to exit game",5,50);
requestanimationframe(render);
使用快取預繪製技術：
function render(context)
function drawtext(context)
使用canvas
快取繪製技術的時候，一定記得快取
canvas
物件大小要小於實際的
canvas
大小。盡量把繪製直線點的操作放在一起，而且盡量一次繪製完成，乙個不好的**如下：
for (var i = 0; i < points.length - 1; i++)context.beginpath();
for (var i = 0; i < points.length - 1; i++)
context.stroke();
canvas
繪製狀態頻繁切換，乙個頻繁切換繪製
style
的例子如下：
var gap = 10;
for(var i=0; i<10; i++)
// even
context.fillstyle = "red";
for (var i = 0; i < 5; i++)
// odd
context.fillstyle = "blue";
for (var i = 0; i < 5; i++)
繪製時，只繪製需要更新的區域，任何時候都要避免不必要的重複繪製與額外開銷。
對於複雜的場景繪製使用分層繪製技術，分為前景與背景分別繪製。定義canvas層的
html如下：
如果沒有必要，要盡量避免使用繪製特效，如陰影，模糊等。
避免使用浮點數座標。
繪製圖形時，長度與座標應選取整數而不是浮點數，原因在於canvas支援半個畫素繪製
會根據小數字實現插值演算法實現繪製影象的反鋸齒效果，如果沒有必要請不要選擇浮點數值。
清空canvas上的繪製內容：
context.clearrect(0, 0, canvas.width,canvas.height)
但是其實在
canvas
還有一種類似
hack
的清空方法：
canvas.width = canvas.width;
也可以實現清空
canvas上內容
的效果，但是在某些瀏覽器上可能不支援。
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...