HTML5 canvas擦除無效

2021-07-25 23:43:15 字數 2171 閱讀 7564

部分安卓手機上會出現canvas內圖表重疊，並且清除無效，屬於偶現缺陷，非常難以確定其產生原因，比如下圖這個樣子，第一次繪製的圖形沒有擦除，導致第二次繪製時出現重影：

初步考慮為裝置自身問題，引起canvasapi的context.clearrect執行無效。在經過一些嘗試之後，發現在每次擦除（clearrect）之前先將畫布dom元素移除，在記憶體中執行擦除操作，繪製完成後再將畫布dom元素重新新增回dom樹的方法能夠每次都完整的擦除圖樣。下面詳細講解如何實現這種「絕對擦除」方式。

//獲取頁面中的canvas畫布容器，通常為乙個div


var container=document.getelementbyid("container");


//建立乙個畫布


var canvas=document.createelement("canvas");


//設定canvas的width/height屬性，乘以二以防止畫素點模糊問題


canvas.width=container.clientwidth*2;


canvas.height=container.clientheight*2;


//設定realcanvas的樣式width/height屬性，填充滿父元素


canvas.style.width=container.clientwidth+"px";


canvas.style.height=container.clientheight+"px";


//開始繪製


var context=canvas.getcontext("2d");


context.fillrect(0,0,20,20);


//普通擦除


context.clearrect(0,0,20,20);
當遇到擦除不全問題時的解決方案：

/*-------------start 與之前完全相同部分--------------*/


//獲取頁面中的canvas畫布容器，通常為乙個div


var container=document.getelementbyid("container");


//建立乙個畫布


var canvas=document.createelement("canvas");


//設定canvas的width/height屬性，乘以二以防止畫素點模糊問題


canvas.width=container.clientwidth*2;


canvas.height=container.clientheight*2;


//設定realcanvas的樣式width/height屬性，填充滿父元素


canvas.style.width=container.clientwidth+"px";


canvas.style.height=container.clientheight+"px";


//開始繪製


var context=canvas.getcontext("2d");


context.fillrect(0,0,20,20);


/*-------------end 與之前完全相同部分--------------*/


/* * 當遇到擦除不全時，我們將canvas元素從頁面上刪除，


* 再執行擦除，擦除之後重新新增到頁面上，可以保證絕對擦除


*/container.removechild(canvas);


context.clearrect(0,0,20,20);


//通常我們還會在此時執行下一步繪圖操作
這樣做並不是完全都是缺點，雖然每一次擦除都要操作dom元素會增加操作量看似會影響效能，但實際上在記憶體中canvas執行clearrect將會更快，最重要的是可以最大可能避免擦除無效；其次，使用這種方式進行擦除而增加的dom操作會因為繪圖本身的機制而被分流開，因此操作dom而增加的開銷完全可以忽略。所以某些逼不得已的情況下，這種擦除方法就放心大膽的使用吧。

clearrect的效能優於fillrect（填充白色）優於canvas.width= canvas.width;

熬夜不易，請作者喝酒！

HTML5 canvas 繪製圓形

canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法，方法定義如 arc x,y,radius,startangle,endangle,countercl...

HTML5canvas時鐘例項

直接放 不太好，還是簡單說說運用到的canvas知識 1 canvas 元素用於在網頁上繪製圖形。id c width 1000 height 400 canvas 2 canvas2d環境下繪製 var ogc oc.getcontext 2d 3 我要開始繪製路徑啦 ogc.begin path...

HTML5 canvas 行星環繞

行星環繞效果展示 未做gif圖，真實結果是會自動環繞 原理說明 繪製乙個簡易的行星環繞圖，主要使用到canvas中的translate函式，用於將畫布原點調整到合適位置 以及rotate函式，讓行星旋轉乙個角度 最後在使用到requestanimationframe函式，令其不間斷的環繞。為了美化，...