一：使用緩存技術實現預繪制，減少重復繪制Canvs內容

在臨高等地區，都構建了全面的區域性戰略布局，加強發展的系統性、市場前瞻性、產品創新能力，以專注、極致的服務理念，為客戶提供成都網站設計、成都網站制作 網站設計制作按需策劃設計,公司網站建設,企業網站建設,品牌網站建設,成都營銷網站建設,成都外貿網站建設,臨高網站建設費用合理。

很多時候我們在Canvas上繪制與更新，總是會保留一些不變的內容，對于這些內容

應該預先繪制緩存，而不是每次刷新。

直接繪制代碼如下：

context.font="24px Arial"; context.fillStyle="blue"; context.fillText("Please press <Esc> to exit game",5,50); requestAnimationFrame(render);

使用緩存預繪制技術：

function render(context) { 	context.drawImage(mText_canvas, 0, 0); 	requestAnimationFrame(render); }  function drawText(context) { 	mText_canvas = document.createElement("canvas"); 	mText_canvas.width = 450; 	mText_canvas.height = 54; 	var m_context = mText_canvas.getContext("2d"); 	m_context.font="24px Arial"; 	m_context.fillStyle="blue"; 	m_context.fillText("Please press <Esc> to exit game",5,50); }

使用Canvas緩存繪制技術的時候，一定記得緩存Canvas對象大小要小于實際的Canvas

大小。盡量把繪制直線點的操作放在一起，而且盡量一次繪制完成，一個不好的代碼如下：

for (var i = 0; i < points.length - 1; i++) { 	  var p1 = points[i]; 	  var p2 = points[i+1]; 	  context.beginPath(); 	  context.moveTo(p1.x, p1.y); 	  context.lineTo(p2.x, p2.y); 	  context.stroke(); }

修改以后性能較高的代碼如下：

context.beginPath(); for (var i = 0; i < points.length - 1; i++) {   var p1 = points[i];   var p2 = points[i+1];   context.moveTo(p1.x, p1.y);   context.lineTo(p2.x, p2.y); } context.stroke();

避免不必要的Canvas繪制狀態頻繁切換，一個頻繁切換繪制style的例子如下：

var GAP = 10; for(var i=0; i<10; i++) { 	context.fillStyle = (i % 2 ? "blue" : "red"); 	context.fillRect(0, i * GAP, 400, GAP); } 

避免頻繁切換繪制狀態，性能更好的繪制代碼如下：

// even context.fillStyle = "red"; for (var i = 0; i < 5; i++) { context.fillRect(0, (i*2) * GAP, 400, GAP); } 			 // odd context.fillStyle = "blue"; for (var i = 0; i < 5; i++) { context.fillRect(0, (i*2+1) * GAP, 400, GAP); } 

繪制時，只繪制需要更新的區域，任何時候都要避免不必要的重復繪制與額外開銷。

對于復雜的場景繪制使用分層繪制技術，分為前景與背景分別繪制。定義Canvas層的

HTML如下：

<canvas id="bg" width="640" height="480" style="position: absolute; z-index: 0"> </canvas> <canvas id="fg" width="640" height="480" style="position: absolute; z-index: 1"> </canvas>

如果沒有必要，要盡量避免使用繪制特效，如陰影，模糊等。

避免使用浮點數坐標。

繪制圖形時，長度與坐標應選取整數而不是浮點數，原因在于Canvas支持半個像素繪制

會根據小數位實現插值算法實現繪制圖像的反鋸齒效果，如果沒有必要請不要選擇浮點數值。

清空Canvas上的繪制內容：

context.clearRect(0, 0, canvas.width,canvas.height)

但是其實在Canvas還有一種類似hack的清空方法：

canvas.width = canvas.width;

也可以實現清空canvas上內容的效果，但是在某些瀏覽器上可能不支持。

本文題目：提高HTML5Canvas性能的技巧
本文網址：http://www.yijiale78.com/article44/ghdgee.html

成都網站建設公司_創新互聯，為您提供ChatGPT、虛擬主機、網站維護、網站策劃、品牌網站制作、搜索引擎優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯