淺談利用緩存來優(yōu)化HTML5 Canvas程序的性能

1、淺談利用緩存來優(yōu)化html5 canvas程序的性能canvas玩多了后，就會(huì)自動(dòng)的要開頭考慮性能問題了。怎么優(yōu)化canvas的動(dòng)畫呢？【用法緩存】用法緩存也就是用離屏canvas舉行預(yù)渲染了，原理很容易，就是先繪制到一個(gè)離屏canvas中，然后再通過drawimage把離屏canvas畫到主canvas中。可能看到這無數(shù)人就會(huì)誤會(huì)，這不是寫嬉戲里面用的無數(shù)的雙緩沖機(jī)制么？其實(shí)不然，雙緩沖機(jī)制是嬉戲編程中為了防止畫面閃耀，因此會(huì)有一個(gè)顯示在用戶面前的畫布以及一個(gè)后臺畫布，舉行繪制時(shí)會(huì)先將畫面內(nèi)容繪制到后臺畫布中，再將后臺畫布里的數(shù)據(jù)繪制到前臺畫布中。這就是雙緩沖，但是canvas中是沒有雙緩沖

2、的，由于現(xiàn)代掃瞄器基本上都是內(nèi)置了雙緩沖機(jī)制。所以，用法離屏canvas并不是雙緩沖，而是把離屏canvas當(dāng)成一個(gè)緩存區(qū)。把需要重復(fù)繪制的畫面數(shù)據(jù)舉行緩存起來，削減調(diào)用canvas的api的消耗。盡人皆知，調(diào)用canvas的api很消耗性能，所以，當(dāng)我們要繪制一些重復(fù)的畫面數(shù)據(jù)時(shí)，妥當(dāng)利用離屏canvas對性能方面有很大的提升，可以看下下面的demo1 、 沒用法緩存2、 用法了緩存但是沒有設(shè)置離屏canvas的寬高 3 、 用法了緩存但是沒有設(shè)置離屏canvas的寬高 4 、 用法了緩存且設(shè)置了離屏canvas的寬高可以看到上面的demo的性能不一樣，下面分析一下緣由：為了實(shí)現(xiàn)每個(gè)圈的樣式

3、，所以繪制圈圈時(shí)我用了循環(huán)繪制，假如沒用啟用緩存，當(dāng)頁面的圈圈數(shù)量達(dá)到一定時(shí)，動(dòng)畫每一幀就要大量調(diào)用canvas的api，要舉行大量的計(jì)算，這樣再好的掃瞄器也會(huì)被拖垮啦。xml/html code復(fù)制內(nèi)容到剪貼板ctx.save(); var j=0; ctx.linewidth = borderwidth; for(var i=1;i body padding:0; margin:0; overflow: hidden; cas display: block; background-color:rgba(0,0,0,0); margin:auto; border:1px solid; 測試

4、掃瞄器不支持canvas 1000個(gè)圈圈對象也不卡 var testbox = function() var canvas = document.getelementbyid("cas"), ctx = canvas.getcontext(&39;2d&39;), borderwidth = 2, balls = ; var ball = function(x , y , vx , vy , usecache) this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.r = getz(getrandom(20,40)

5、; 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; var num = getz(this.r/borderwidth); for(var j=0;j(canvas.width-this.r)|this.x(canvas

6、.height-this.r)|this.y 離屏canvas還有一個(gè)注重事項(xiàng)，假如你做的效果是會(huì)將對象不停地創(chuàng)建和銷毀，請慎重用法離屏canvas，起碼不要像我上面寫的那樣給每個(gè)對象的屬性綁定離屏canvas。由于假如這樣綁定，當(dāng)對象被銷毀時(shí)，離屏canvas也會(huì)被銷毀，而大量的離屏canvas不停地被創(chuàng)建和銷毀，會(huì)導(dǎo)致canvas buffer耗費(fèi)大量gpu資源，簡單造成掃瞄器崩潰或者嚴(yán)峻卡幀現(xiàn)象。解決方法就是弄一個(gè)離屏canvas數(shù)組，預(yù)先裝進(jìn)足夠數(shù)量的離屏canvas，僅將仍然存活的對象緩存起來，當(dāng)對象被銷毀時(shí)，再解除緩存。這樣就不會(huì)導(dǎo)致離屏canvas被銷毀了。 【用法request

7、animationframe】這個(gè)就不詳細(xì)說明了，估量無數(shù)人都知道，這個(gè)才是做動(dòng)畫的最佳循環(huán)，而不是settimeout或者setinterval。挺直貼出兼容性寫法：xml/html code復(fù)制內(nèi)容到剪貼板window.raf = (function() return window.requestanimationframe | window.webkitrequestanimationframe | window.mozrequestanimationframe | window.orequestanimationframe | window.msrequestanimationfram

8、e | function (callback) window.settimeout(callback, 1000 / 60); ; )(); 【避開浮點(diǎn)運(yùn)算】雖然javascript提供了很便利的一些取整辦法，像math.floor，math.ceil，parseint，但是，國外友人做過測試，parseint這個(gè)辦法做了一些額外的工作（比如檢測數(shù)據(jù)是不是有效的數(shù)值，parseint 甚至先將參數(shù)轉(zhuǎn)換成了字符串!），所以，挺直用parseint的話相對來說比較消耗性能，那怎樣取整呢，可以挺直用老外寫的很巧妙的辦法了：javascript code復(fù)制內(nèi)容到剪貼板1.rounded = (0.5

9、 + somenum) | 0;2.rounded = (0.5 + somenum); 3.rounded = (0.5 + somenum) 0; 運(yùn)算符不懂的可以挺直戳： 里面有具體說明【盡量削減canvasapi的調(diào)用】作粒子效果時(shí)，盡量少用法圓，最好用法方形，由于粒子太小，所以方形看上去也跟圓差不多。至于緣由，很簡單理解，我們畫一個(gè)圓需要三個(gè)步驟：先beginpath，然后用arc畫弧，再用fill舉行填充才干產(chǎn)生一個(gè)圓。但是畫方形，只需要一個(gè)fillrect就可以了。雖然只是差了兩個(gè)調(diào)用，當(dāng)粒子對象數(shù)量達(dá)到一定時(shí)，這性能差距就會(huì)顯示出來了。還有一些其他注重事項(xiàng)，我就不一一列舉了，由于谷歌上一搜也挺多的。我這也算是一個(gè)給自己做下記錄，主要是記錄緩存的使用。想要提升canvas的性能最主要的還是得注重代碼的結(jié)構(gòu)，削減不須要的ap