提高canvas效能技巧

2021-09-25 17:50:53 字數 2306 閱讀 8621

錯誤**：

var canvas = document.getelementbyid("mycanvas");


var context = this.canvas.getcontext('2d');


var drawasync = eval(jscex.compile("async", function () 


}))drawasync().start();
正確**：

var canvas = document.getelementbyid("mycanvas");


var context = this.canvas.getcontext('2d');


var m_canvas = document.createelement('canvas');


m_canvas.width = 64;


m_canvas.height = 64;


var m_context = m_canvas.getcontext('2d');


drawmario(m_context);


var drawasync = eval(jscex.compile("async", function () 


}))drawasync().start();
這裡m_canvas的寬度和高度控制得越小越好。

錯誤**：

for (var i = 0; i < points.length - 1; i++)
正確**：

context.beginpath();


for (var i = 0; i < points.length - 1; i++) 


context.stroke();
錯誤**：

for (var i = 0; i < stripes; i++)
正確**：

context.fillstyle = color1;


for (var i = 0; i < stripes / 2; i++) 


context.fillstyle = color2;


for (var i = 0; i < stripes / 2; i++)
錯誤**：

context.fillrect(0, 0, canvas.width, canvas.height);
正確**：

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


context.shadowoffsetx = 5;


context.shadowoffsety = 5;


context.shadowblur = 4;


context.shadowcolor = 'rgba(255, 0, 0, 0.5)';


context.fillrect(20, 20, 150, 100);
詳細效能差別： 

一般情況下：clearrect的效能優於fillrect優於canvas.width = canvas.width;

幾種取整數的方法：

rounded = (0.5 + somenum) | 0;


rounded = ~ ~(0.5 + somenum);


rounded = (0.5 + somenum) << 0;
(function () 


if (!window.requestanimationframe)


window.requestanimationframe = function (callback, element) ,


timetocall);


lasttime = currtime + timetocall;


return id;


};if (!window.cancelanimationframe)


window.cancelanimationframe = function (id) ;


} ());

與渲染無關的計算交給worker

複雜的計算交給引擎（自己寫，或者用開源的），比如3d、物理

快取load好的，canvas上畫canvas,而不是畫image

html5實驗室【目錄】:

提高canvas效能技巧

參考文章 總結 1 少用drawimage，能將多張圖拼成一張，盡量多拼 2 drawimage的時候，用上全部引數，也就是用上sprite技術 3 只做少量的，必要的碰撞檢測 4 使用整型，少用浮點型 5 讓動畫基於時間，別基於幀，幀不可靠,基於時間可以更平滑 6 文字繪製的成本很高 7 使用預渲...

提高HTML5 Canvas效能的技巧

一 使用快取技術實現預繪製，減少重複繪製canvs內容 很多時候我們在canvas上繪製與更新，總是會保留一些不變的內容，對於這些內容 應該預先繪製快取，而不是每次重新整理。直接繪製 如下 context.font 24px arial context.fillstyle blue context....

提高ListView效能的技巧

listview優化一直是乙個老生常談的問題，不管是面試還是平常的開發中，listview永遠不會被忽略掉，那麼這篇文章我們來看看如何最大化的優化listview的效能。不要在你的getview 中寫過多的邏輯 我們可以將這些 放在別的地方，例如 優化前的getview override publi...