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

成都創(chuàng)新互聯(lián)公司專注于新蔡企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開(kāi)發(fā),成都商城網(wǎng)站開(kāi)發(fā)。新蔡網(wǎng)站建設(shè)公司,為新蔡等地區(qū)提供建站服務(wù)。全流程定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

很多時(shí)候我們?cè)贑anvas上繪制與更新，總是會(huì)保留一些不變的內(nèi)容，對(duì)于這些內(nèi)容

應(yīng)該預(yù)先繪制緩存，而不是每次刷新。

直接繪制代碼如下：

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

使用緩存預(yù)繪制技術(shù)：

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  to exit game",5,50); }

使用Canvas緩存繪制技術(shù)的時(shí)候，一定記得緩存Canvas對(duì)象大小要小于實(shí)際的Canvas

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

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)頻繁切換，一個(gè)頻繁切換繪制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); }

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

對(duì)于復(fù)雜的場(chǎng)景繪制使用分層繪制技術(shù)，分為前景與背景分別繪制。定義Canvas層的

HTML如下：

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

避免使用浮點(diǎn)數(shù)坐標(biāo)。

繪制圖形時(shí)，長(zhǎng)度與坐標(biāo)應(yīng)選取整數(shù)而不是浮點(diǎn)數(shù)，原因在于Canvas支持半個(gè)像素繪制

會(huì)根據(jù)小數(shù)位實(shí)現(xiàn)插值算法實(shí)現(xiàn)繪制圖像的反鋸齒效果，如果沒(méi)有必要請(qǐng)不要選擇浮點(diǎn)數(shù)值。

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

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

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

canvas.width = canvas.width;

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

名稱欄目：提高HTML5Canvas性能的技巧-創(chuàng)新互聯(lián)
標(biāo)題來(lái)源：http://weahome.cn/article/jedii.html