一：使用緩存技術實現(xiàn)預繪制，減少重復繪制Canvs內(nèi)容

在臨高等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供成都網(wǎng)站設計、成都網(wǎng)站制作 網(wǎng)站設計制作按需策劃設計,公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,品牌網(wǎng)站建設,成都營銷網(wǎng)站建設,成都外貿(mào)網(wǎng)站建設,臨高網(wǎng)站建設費用合理。

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

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

直接繪制代碼如下：

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繪制狀態(tài)頻繁切換，一個頻繁切換繪制style的例子如下：

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

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

// 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); } 

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

對于復雜的場景繪制使用分層繪制技術，分為前景與背景分別繪制。定義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>

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

避免使用浮點數(shù)坐標。

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

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

清空Canvas上的繪制內(nèi)容：

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

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

canvas.width = canvas.width;

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

本文題目：提高HTML5Canvas性能的技巧
本文網(wǎng)址：http://www.ekvhdxd.cn/article44/ghdgee.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、虛擬主機、網(wǎng)站維護、網(wǎng)站策劃、品牌網(wǎng)站制作、搜索引擎優(yōu)化

廣告

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