Perbincangan ringkas tentang menggunakan cache untuk mengoptimumkan prestasi kemahiran tutorial HTML5 Canvas program_html5

Selepas anda terlalu banyak bermain dengan kanvas, anda secara automatik akan mula mempertimbangkan isu prestasi. Bagaimana untuk mengoptimumkan animasi kanvas?

【Gunakan cache】

Menggunakan cache bermakna menggunakan kanvas luar skrin untuk pra-perenderan Prinsipnya sangat mudah, iaitu, mula-mula lukis ke dalam kanvas luar skrin, dan kemudian lukiskan kanvas luar skrin ke dalam kanvas utama melalui drawImage. Ramai orang mungkin salah faham tentang ini. Bukankah ini mekanisme penimbal berganda yang banyak digunakan dalam permainan?

Sebenarnya, mekanisme penimbalan berganda digunakan dalam pengaturcaraan permainan untuk mengelakkan kelipan skrin Oleh itu, akan ada kanvas yang dipaparkan di hadapan pengguna dan kanvas latar belakang apabila melukis, kandungan skrin akan dilukis terlebih dahulu kanvas latar belakang, dan kemudian kanvas latar belakang akan dilukis Data dalam kanvas dilukis ke kanvas hadapan. Ini ialah penimbalan berganda, tetapi tiada penimbalan berganda dalam kanvas, kerana pelayar moden pada asasnya mempunyai mekanisme penimbalan berganda terbina dalam. Oleh itu, menggunakan kanvas luar skrin bukanlah penimbalan berganda, tetapi menganggap kanvas luar skrin sebagai kawasan cache. Data skrin cache yang perlu dilukis berulang kali untuk mengurangkan penggunaan memanggil API kanvas.

Seperti yang kita semua tahu, memanggil API kanvas menggunakan prestasi Oleh itu, apabila kami ingin melukis beberapa data skrin berulang, penggunaan kanvas luar skrin yang betul boleh meningkatkan prestasi anda dengan ketara

1. Tiada cache digunakan

　2. Cache digunakan tetapi lebar dan ketinggian kanvas luar skrin tidak ditetapkan

3. Cache digunakan tetapi lebar dan ketinggian kanvas luar skrin tidak ditetapkan

　4. Gunakan caching dan tetapkan lebar dan tinggi kanvas luar skrin

Anda dapat melihat bahawa prestasi DEMO di atas adalah berbeza Mari kita analisa sebab di bawah: Untuk mencapai gaya setiap bulatan, saya menggunakan lukisan gelung semasa melukis bulatan Jika caching tidak didayakan, apabila bilangan bulatan pada halaman Apabila ia mencapai titik tertentu, sebilangan besar panggilan API kanvas diperlukan untuk setiap bingkai animasi, dan sejumlah besar pengiraan diperlukan, supaya tidak kira betapa baiknya penyemak imbas, ia akan dibawa turun.
Kod XML/HTMLSalin kandungan ke papan keratan

1. ctx.save();   
2.                         var j=0;   
3.                          ctx.lineWidth = borderWidth;   
4.                          untuk(var i=1;i;iini.r;i =borderWidth){   
5.                             ctx.beginPath();   
6.                             ctx.strokeStyle = warna ini.   
7.                             ctx.arc(this.x , this.y , i , 0 , 2*Math.PI);   
8.                             ctx.stroke();   
9.                             j ;   
10.                         }   
11.                         ctx.restore();  

　　所以，我的方法很简单，每个圈圈对象里面给他一个离屏kanvas作缓存区。

　　除了创建离屏kanvas作为缓存之外，下面的代码中有一点很关键，就是福箺高度，kanvas生成后的默认大小是300X150；对于我的代码中每个缓存起来圈圈对象半径最大也就不超过80，所以300X150的大小明显会造成很多琺定白，所以300X150。费，所以就要设置一下离屏canvas的宽度和高度，让它跟缓存起来的元素大小一致，这样也有利于提高动画性能。上面的四个demo很明显的显示出了性能差距，如月家家面超过400个圈圈对象时就会卡的不行了，而设置了宽高1000个圈圈对象也不觉得卡。

Kod XML/HTML

复制内容到剪贴板

1. var bola = fungsi(x , y , vx , vy , useCache){   
2.                 ini.x = x;   
3.                 ini.y = y;   
4.                 ini.vx = vx;   
5.                 ini.vy = vy;   
6.                 ini.r = getZ(getRandom(20,40));   
7.                 warna ini = [];   
8.                 this.cacheCanvas = dokumen.createElement("canvas");   
9.                 inithis.cacheCtx = this.cacheCanvas.getContext("2d");   
10.                 this.cacheCanvas.width = 2*this.r;   
11.                 this.cacheCanvas.height = 2*this.r;   
12.                 var bilangan = getZ(this.r/borderWidth);   
13.                  untuk(var j=0;jbilangan;j ){   
14.                     this.color.push("rgba(" getZ(getRandom(0,255)) "," getZ(getRandom(0,255)) "," getZ(getRandom(0,255)) ",1)");   
15.                 }   
16.                 this.useCache = useCache;   
17.                 jika(useCache){   
18.                     this.cache();   
19.                 }   
20.             }  

Apabila saya membuat instantiat objek bulatan, saya terus memanggil kaedah cache dan melukis bulatan kompleks terus ke dalam kanvas luar skrin objek bulatan dan menyimpannya.

Kod XML/HTMLSalin kandungan ke papan keratan

1. cache:function(){
2. this.cacheCtx.save();
3. var j=0;
 
4. this.cacheCtx.lineWidth = borderWidth; untuk(var
i
5. =1;iini.r;i =borderWidth){ this.cacheCtx.beginPath();
6.  
ini
7. this.cacheCtx.strokeStyle = this.color[j]; this.cacheCtx.arc(this.r, this.r, i, 0, 2*Math.PI );
this.cacheCtx.stroke();
j ;
                                                                      
10. this.cacheCtx.restore();
11.                                                                                    
12. Kemudian dalam animasi seterusnya, saya hanya perlu melukis kanvas luar skrin objek bulatan ke dalam kanvas utama dengan cara ini, canvasAPI yang dipanggil dalam setiap bingkai hanya mempunyai ayat ini:
13. Kod XML/HTML
Salin kandungan ke papan keratan

ctx.drawImage(this.cacheCanvas , this.x-this.r , this.y-this.r); Berbanding dengan lukisan gelung sebelumnya, ia adalah lebih pantas. Oleh itu, apabila kita perlu berulang kali melukis grafik vektor atau melukis berbilang gambar, kita boleh menggunakan kanvas luar skrin secara munasabah untuk menyimpan data gambar terlebih dahulu, yang boleh mengurangkan banyak penggunaan prestasi yang tidak diperlukan dalam setiap bingkai berikutnya.

Kod versi lancar untuk 1000 objek bulatan disiarkan di bawah:

　
1. Kod XML/HTML
Salin kandungan ke papan keratan

1. html>  
2. html lang="en" >  
3. kepala>  
4.     meta charset="UTF- 8">  
5.     gaya>  
6.         badan{   
7.             padding:0;   
8.             margin:0;   
9.              limpahan: tersembunyi;   
10.         }   
11.         #cas{   
12.             paparan: sekat;   
13.             warna latar belakang:rgba(0,0,0,0);   
14.             margin:auto;   
15.             sempadan:1px pepejal;   
16.         }
17.  gaya> 
18.  tajuk>Ujiantajuk>
19. kepala>
20. badan>
21. div >
22.  kanvas id='cas' lebar="800" tinggi="600">Pelayar tidak menyokong kanvaskanvas > ;
23.  div gaya="teks- align:center">1000 objek bulatan tidak tersekatdiv>
24.  div> 
26.  skrip> 
27. var testBox = fungsi(){
28. var kanvas = dokumen.getElementById("cas"),
29. ctx = kanvas.getContext('2d'),
30.  lebar sempadan = 2,
31. Bola = [];
32. var bola = fungsi(x, y, vx, vy, useCache){
33.  ini.x = x;
 
34. ini.y = y
 
35. ini.vx = vx
36.                 ini.vy = vy;   
37.                 ini.r = getZ(getRandom(20,40));   
38.                 warna ini = [];   
39.                 this.cacheCanvas = dokumen.createElement("canvas");   
40.                 inithis.cacheCtx = this.cacheCanvas.getContext("2d");   
41.                 this.cacheCanvas.width = 2*this.r;   
42.                 this.cacheCanvas.height = 2*this.r;   
43.                 var bilangan = getZ(this.r/borderWidth);   
44.                  untuk(var j=0;jbilangan;j ){   
45.                     this.color.push("rgba(" getZ(getRandom(0,255)) "," getZ(getRandom(0,255)) "," getZ(getRandom(0,255)) ",1)");   
46.                 }   
47.                 this.useCache = useCache;   
48.                 jika(useCache){   
49.                     this.cache();   
50.                 }   
51.             }  
52.   
53.             fungsi getZ(num){   
54.                 var dibundarkan;   
55.                 bulat = (0.5   bilangan) | 0;   
56.                 // A double bitwise bukan.   
57.                 bulat = ~~ (0.5   bilangan);   
58.                 // Akhir sekali, anjakan bitwise ke kiri.   
59.                 bulat = (0.5   bilangan)  🎜>0
;   
  
                kembali bulat;   
62.             }  
63.   
64.             bola.prototaip = {   
65.                 paint:function(ctx){   
66.                     jika(!this.useCache){   
67.                         ctx.save();   
68.                         var j=0;   
69.                          ctx.lineWidth = borderWidth;   
70.                          untuk(var i=1;i;iini.r;i =borderWidth){   
71.                             ctx.beginPath();   
72.                             ctx.strokeStyle = warna ini.   
73.                             ctx.arc(this.x , this.y , i , 0 , 2*Math.PI);   
74.                             ctx.stroke();   
75.                             j ;   
76.                         }   
77.                         ctx.restore();   
78.                     } lain{   
79.                          ctx.drawImage(this.cacheCanvas , this.x-this.r , this.y-this.r);   
80.                     }   
81.                 },   
82.   
83.                 cache:function(){   
84.                     this.cacheCtx.save();   
85.                     var j=0;   
86.                     this.cacheCtx.lineWidth = borderWidth;   
87.                     untuk(var i=1;i< 🎜>ini.r;i =borderWidth){   
                        this.cacheCtx.beginPath();   
                         
89. inithis.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(){   
                    ini.x  = ini.vx;   
                    ini.y  = ini.vy;   
                    jika(ini.x
100. >(canvas.width-this.r)||ini.xini.r){                             
ini
101. ini.x=ini.x 🎜>?this.r:(kanvas.width-this.r);                             
ini.vx
102.  = -ini.vx;                        }  
103.                     jika(this.y>(canvas.height-this.r)||this.yini.r){   
                         
104. iniini.y=ini.ythis.y 🎜>?this.r:(canvas.height-this.r);   
                         
105. ini.vy = -ini.vy;   
                    }   
  
                    ini.cat(ctx);   
                }   
            }   
  
            var 
112. Permainan = {   
                init:function(){   
                    untuk(var 
114. i=0;i< 🎜>1000;i ){                             var 
b
115.  = baharu bola(get Random(0,) can .height), , getRandom(-10 , 10) ,  getRandom(-10 , 10) , true)                            Bola.tolak(b);   
116.                     }   
117.                 },   
118.   
119.                 kemas kini:function(){   
120.                     ctx.clearRect(0,0,canvas.width,canvas.height);   
121.                     untuk(var 
i
122. =0;i< 🎜>Bola.panjang;i ){                            Bola[i].move();   
                    }   
                },   
124.   
125.                 gelung:function(){   
126.                     var _ini = ini;   
127.                     ini.kemas kini();   
128.                     RAF(function(){   
129.                         _this.loop();   
130.                     })   
131.                 },   
132.   
133.                 mula:function(){   
134.                     ini.init();   
135.                     this.loop();   
136.                 }   
137.             }   
138.   
139.             tetingkap.RAF = (fungsi(){   
140.                 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || fungsi (panggilan balik) {window.setTimeout(panggilan balik, 1000 / 60); };   
141.             })();   
142.   
143.             permainan kembali;   
144.         }();   
145.   
146.         fungsi getRandom(a , b){   
147.             kembali Math.random()*(b-a) a;   
148.         }   
149.   
150.         window.onload = fungsi(){   
151.             testBox.start();   
152.         }   
153.     skrip>  
154. badan>  
155. html>  

Terdapat satu lagi nota tentang kanvas luar skrin Jika kesan yang anda lakukan ialah membuat dan memusnahkan objek secara berterusan, sila gunakan kanvas luar skrin dengan berhati-hati Sekurang-kurangnya jangan mengikat atribut setiap objek seperti yang saya tulis di atas. Tetapkan kanvas luar skrin.

Kerana jika diikat seperti ini, apabila objek dimusnahkan, kanvas luar skrin juga akan dimusnahkan, dan sejumlah besar kanvas luar skrin sentiasa dicipta dan dimusnahkan, yang akan menyebabkan penimbal kanvas menggunakan banyak sumber GPU dan mudah menyebabkan penyemak imbas Ranap atau membekukan bingkai yang serius. Penyelesaiannya adalah untuk mencipta tatasusunan kanvas luar skrin, pramuat bilangan kanvas luar skrin yang mencukupi, cache hanya objek yang masih hidup dan nyahcachenya apabila objek dimusnahkan. Ini tidak akan menyebabkan kanvas luar skrin dimusnahkan.

【Gunakan requestAnimationFrame】

Saya tidak akan menerangkan perkara ini secara terperinci, saya rasa ramai orang tahu bahawa ini adalah gelung terbaik untuk animasi, bukan setTimeout atau setInterval. Siarkan secara langsung kaedah penulisan keserasian:

Kod XML/HTMLSalin kandungan ke papan keratan

1. tetingkap.RAF = (fungsi(){
2. Kembalikan tetingkap.requestAnimationFrame ||. tetingkap.webkitRequestAnimationFrame ||.
3. })();

　

【Elakkan operasi titik terapung】

Walaupun JavaScript menyediakan beberapa kaedah pembundaran yang sangat mudah, seperti Math.floor, Math.ceil dan parseInt, rakan asing telah melakukan ujian dan kaedah parseInt melakukan beberapa kerja tambahan (seperti mengesan sama ada data adalah nilai yang sah, parseInt malah menukar parameter kepada rentetan terlebih dahulu!), jadi menggunakan parseInt secara langsung adalah lebih intensif prestasi Jadi bagaimana untuk membulatkan, anda boleh terus menggunakan kaedah yang sangat bijak yang ditulis oleh orang asing:

Kod JavaScriptSalin kandungan ke papan keratan

1.bulat = (0.5 somenum) | 2.bulat = ~~ (0.5 somenum);

Jika anda tidak memahami pengendali, anda boleh klik di sini:

http://www.w3school.com.cn/js/pro_js_operators_bitwise.asp Terdapat penjelasan terperinci di dalam

　

【Kurangkan panggilan canvasAPI sebanyak mungkin】

Apabila membuat kesan zarah, cuba gunakan bulatan sesedikit mungkin dan sebaiknya gunakan segi empat sama Kerana zarahnya terlalu kecil, segi empat sama kelihatan seperti bulatan. Mengenai sebabnya, ia mudah difahami. Kita memerlukan tiga langkah untuk melukis bulatan: mula-mula beginPath, kemudian gunakan lengkok untuk melukis lengkok, dan kemudian gunakan isian untuk mengisinya untuk menghasilkan bulatan. Tetapi untuk melukis segi empat sama, anda hanya memerlukan satu fillRect. Walaupun hanya terdapat perbezaan dua panggilan, apabila bilangan objek zarah mencapai tahap tertentu, jurang prestasi akan muncul.

Terdapat beberapa perkara lain yang perlu diberi perhatian, saya tidak akan menyenaraikan semuanya kerana terdapat beberapa perkara di Google. Ini boleh dianggap sebagai rekod untuk diri saya sendiri, terutamanya untuk merekodkan penggunaan cache. Jika anda ingin meningkatkan prestasi kanvas, perkara yang paling penting ialah memberi perhatian kepada struktur kod, mengurangkan panggilan API yang tidak perlu, mengurangkan operasi kompleks dalam setiap bingkai, atau menukar operasi kompleks daripada sekali untuk setiap bingkai kepada sekali untuk beberapa bingkai. Pada masa yang sama, untuk penggunaan cache yang disebutkan di atas, untuk kemudahan, saya menggunakan kanvas luar skrin untuk setiap objek Malah, kanvas luar skrin tidak boleh digunakan terlalu banyak Jika anda menggunakan terlalu banyak kanvas luar skrin akan menjadi masalah prestasi. Sila cuba yang terbaik menggunakan kanvas luar skrin.

Alamat kod sumber:

https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Other-demo/cache