提高canvas效能技巧

2022-07-16 12:48:07 字數 501 閱讀 5787

參考文章:

【總結】

1)少用drawimage,能將多張圖拼成一張,盡量多拼;

2)drawimage的時候,用上全部引數,也就是用上sprite技術;

3)只做少量的,必要的碰撞檢測;

4)使用整型,少用浮點型;

5)讓動畫基於時間,別基於幀,幀不可靠,基於時間可以更平滑;

6)文字繪製的成本很高;

7)使用預渲染技術,將需要反覆繪製的東西預渲染到看不見的canvas上,再從它上面渲染至顯示用的canvas上,預渲染用的canvas大小不宜過大,不然它的開銷太大,得不償失。也就是說,預渲染用的canvas不宜使用sprite技術;

8)在路徑方面,合併多個路徑一次繪出來,不要多次繪製零散的路徑;

9)改變context上下文的成本比較高,在相同的上下文下盡量將相同的事情做完,再做另一件事,不要頻繁切換上下文;

10)用多個canvas,分別繪製不同的圖層,不同圖層可以有不同的fps;

11)避免使用陰影;

提高canvas效能技巧

錯誤 var canvas document.getelementbyid mycanvas var context this.canvas.getcontext 2d var drawasync eval jscex.compile async function drawasync start 正...

提高HTML5 Canvas效能的技巧

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

提高ListView效能的技巧

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