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

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

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

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

直接繪制代碼如下：

context.font="24px Arial"; context.fillStyle="blue"; context.fillText("Please press <Esc> 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 <Esc> 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ù)繪制與額外開銷。

對(duì)于復(fù)雜的場(chǎng)景繪制使用分層繪制技術(shù)，分為前景與背景分別繪制。定義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>

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

避免使用浮點(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)繪制圖像的反鋸齒效果，如果沒有必要請(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)容的效果，但是在某些瀏覽器上可能不支持。

本文題目：提高HTML5Canvas性能的技巧
本文網(wǎng)址：http://sd-ha.com/article44/ghdgee.html

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

廣告

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