淺談利用緩存來優化HTML5 Canvas程序的性能

2020-03-24 18:24:57

字體：大中小

來源：轉載

供稿：網友

canvas玩多了后，就會自動的要開始考慮性能問題了。怎么優化canvas的動畫呢？【使用緩存】使用緩存也就是用離屏canvas進行預渲染了，原理很簡單，就是先繪制到一個離屏canvas中，然后再通過drawImage把離屏canvas畫到主canvas中。可能看到這很多人就會誤解，這不是寫游戲里面用的很多的雙緩沖機制么？其實不然，雙緩沖機制是游戲編程中為了防止畫面閃爍，因此會有一個顯示在用戶面前的畫布以及一個后臺畫布，進行繪制時會先將畫面內容繪制到后臺畫布中，再將后臺畫布里的數據繪制到前臺畫布中。這就是雙緩沖，但是canvas中是沒有雙緩沖的，因為現代瀏覽器基本上都是內置了雙緩沖機制。所以，使用離屏canvas并不是雙緩沖，而是把離屏canvas當成一個緩存區。把需要重復繪制的畫面數據進行緩存起來，減少調用canvas的API的消耗。眾所周知，調用canvas的API很消耗性能，所以，當我們要繪制一些重復的畫面數據時，妥善利用離屏canvas對性能方面有很大的提升，可以看下下面的DEMO 1 、沒使用緩存 2、使用了緩存但是沒有設置離屏canvas的寬高 3 、使用了緩存但是沒有設置離屏canvas的寬高 4 、使用了緩存且設置了離屏canvas的寬高可以看到上面的DEMO的性能不一樣，下面分析一下原因：為了實現每個圈的樣式，所以繪制圈圈時我用了循環繪制，如果沒用啟用緩存，當頁面的圈圈數量達到一定時，動畫每一幀就要大量調用canvas的API，要進行大量的計算，這樣再好的瀏覽器也會被拖垮啦。
XML/HTML Code復制內容到剪貼板
ctx.lineWidth=borderWidth; for(vari=1;i this.r;i+=borderWidth){ ctx.beginPath(); ctx.strokeStyle=this.color[j]; ctx.arc(this.x,this.y,i,0,2*Math.PI); ctx.stroke(); j++; } ctx.restore();
所以，我的方法很簡單，每個圈圈對象里面給他一個離屏canvas作緩存區。除了創建離屏canvas作為緩存之外，下面的代碼中有一點很關鍵，就是要設置離屏canvas的寬度和高度，canvas生成后的默認大小是300X150；對于我的代碼中每個緩存起來圈圈對象半徑最大也就不超過80，所以300X150的大小明顯會造成很多空白區域，會造成資源浪費，所以就要設置一下離屏canvas的寬度和高度，讓它跟緩存起來的元素大小一致，這樣也有利于提高動畫性能。上面的四個demo很明顯的顯示出了性能差距，如果沒有設置寬高，當頁面超過400個圈圈對象時就會卡的不行了，而設置了寬高1000個圈圈對象也不覺得卡。
XML/HTML Code復制內容到剪貼板
varball=function(x,y,vx,vy,useCache){ this.x=x; this.y=y; this.vx=vx; this.vy=vy; this.r=getZ(getRandom(20,40)); this.color=[]; this.cacheCanvas=document.createElement( canvas thisthis.cacheCtx=this.cacheCanvas.getContext( 2d this.cacheCanvas.width=2*this.r; this.cacheCanvas.height=2*this.r; varnum=getZ(this.r/borderWidth); for(varj=0;j num;j++){ this.color.push( rgba( +getZ(getRandom(0,255))+ , +getZ(getRandom(0,255))+ , +getZ(getRandom(0,255))+ ,1) } this.useCache=useCache; if(useCache){ this.cache(); } }
當我實例化圈圈對象時，直接調用緩存方法，把復雜的圈圈直接畫到圈圈對象的離屏canvas中保存起來。
XML/HTML Code復制內容到剪貼板
varj=0; this.cacheCtx.lineWidth=borderWidth; for(vari=1;i this.r;i+=borderWidth){ this.cacheCtx.beginPath(); thisthis.cacheCtx.strokeStyle=this.color[j]; this.cacheCtx.arc(this.r,this.r,i,0,2*Math.PI); this.cacheCtx.stroke(); j++; } this.cacheCtx.restore(); }
然后在接下來的動畫中，我只需要把圈圈對象的離屏canvas畫到主canvas中，這樣，每一幀調用的canvasAPI就只有這么一句話：XML/HTML Code復制內容到剪貼板
ctx.drawImage(this.cacheCanvas,this.x-this.r,this.y-this.r);
跟之前的for循環繪制比起來，實在是快太多了。所以當需要重復繪制矢量圖的時候或者繪制多個圖片的時候，我們都可以合理利用離屏canvas來預先把畫面數據緩存起來，在接下來的每一幀中就能減少很多沒必要的消耗性能的操作。下面貼出1000個圈圈對象流暢版代碼：
XML/HTML Code復制內容到剪貼板
div canvasid='cas'width= 800 height= 600 瀏覽器不支持canvas /canvas div '2d'), borderWidth=2, Balls=[]; varball=function(x,y,vx,vy,useCache){ this.x=x; this.y=y; this.vx=vx; this.vy=vy; this.r=getZ(getRandom(20,40)); this.color=[]; this.cacheCanvas=document.createElement( canvas thisthis.cacheCtx=this.cacheCanvas.getContext( 2d this.cacheCanvas.width=2*this.r; this.cacheCanvas.height=2*this.r; varnum=getZ(this.r/borderWidth); for(varj=0;j num;j++){ this.color.push( rgba( +getZ(getRandom(0,255))+ , +getZ(getRandom(0,255))+ , +getZ(getRandom(0,255))+ ,1) } this.useCache=useCache; if(useCache){ this.cache(); } } functiongetZ(num){ varrounded; rounded=(0.5+num)|0; //Adoublebitwisenot. rounded=~~(0.5+num); //Finally,aleftbitwiseshift. rounded=(0.5+num) 0; returnrounded; } ball.prototype={ paint:function(ctx){ if(!this.useCache){ ctx.save(); varj=0; ctx.lineWidth=borderWidth; for(vari=1;i this.r;i+=borderWidth){ ctx.beginPath(); ctx.strokeStyle=this.color[j]; ctx.arc(this.x,this.y,i,0,2*Math.PI); ctx.stroke(); j++; } ctx.restore(); }else{ ctx.drawImage(this.cacheCanvas,this.x-this.r,this.y-this.r); } }, cache:function(){ this.cacheCtx.save(); varj=0; this.cacheCtx.lineWidth=borderWidth; for(vari=1;i this.r;i+=borderWidth){ this.cacheCtx.beginPath(); thisthis.cacheCtx.strokeStyle=this.color[j]; this.cacheCtx.arc(this.r,this.r,i,0,2*Math.PI); this.cacheCtx.stroke(); j++; } this.cacheCtx.restore(); }, move:function(){ this.x+=this.vx; this.y+=this.vy; if(this.x (canvas.width-this.r)||this.x this.r){ thisthis.x=this.x this.r?this.r:(canvas.width-this.r); this.vx=-this.vx; } if(this.y (canvas.height-this.r)||this.y this.r){ thisthis.y=this.y this.r?this.r:(canvas.height-this.r); this.vy=-this.vy; } this.paint(ctx); } } varGame={ init:function(){ for(vari=0;i 1000;i++){ varb=newball(getRandom(0,canvas.width),getRandom(0,canvas.height),getRandom(-10,10),getRandom(-10,10),true) Balls.push(b); } }, update:function(){ ctx.clearRect(0,0,canvas.width,canvas.height); for(vari=0;i Balls.length;i++){ Balls[i].move(); } }, loop:function(){ var_this=this; this.update(); RAF(function(){ _this.loop(); }) }, start:function(){ this.init(); this.loop(); } } window.RAF=(function(){ returnwindow.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60);}; })(); returnGame; }(); functiongetRandom(a,b){ returnMath.random()*(b-a)+a; } window.onload=function(){ testBox.start(); } /script /body /html

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML5實現拖拽功能步驟詳解

下一篇：HTML5 form標簽之解放表單驗證、增加文件上傳、集