Une brève discussion sur l'utilisation du cache pour optimiser les performances des compétences du didacticiel HTML5 Canvas program_html5

Après avoir trop joué avec Canvas, vous commencerez automatiquement à considérer les problèmes de performances. Comment optimiser l’animation du canevas ?

【Utiliser le cache】

Utiliser le cache signifie utiliser un canevas hors écran pour le pré-rendu. Le principe est très simple, c'est-à-dire qu'il faut d'abord dessiner dans un canevas hors écran, puis dessiner le canevas hors écran dans le canevas principal via drawImage. Beaucoup de gens peuvent mal comprendre cela. N'est-ce pas un mécanisme de double tampon très utilisé dans les jeux ?

En fait, le mécanisme de double tampon est utilisé dans la programmation de jeux pour empêcher le scintillement de l'écran. Par conséquent, un canevas sera affiché devant l'utilisateur et un canevas d'arrière-plan lors du dessin, le contenu de l'écran sera d'abord dessiné vers le. canevas d'arrière-plan, puis le canevas d'arrière-plan sera dessiné. Les données du canevas sont dessinées sur le canevas avant. Il s'agit d'une double mise en mémoire tampon, mais il n'y a pas de double mise en mémoire tampon dans Canvas, car les navigateurs modernes ont essentiellement un mécanisme de double mise en mémoire tampon intégré. Par conséquent, l’utilisation d’un canevas hors écran n’est pas une double mise en mémoire tampon, mais traite le canevas hors écran comme une zone de cache. Mettez en cache les données d'écran qui doivent être dessinées à plusieurs reprises pour réduire la consommation d'appel de l'API Canvas.

Comme nous le savons tous, l'appel de l'API Canvas consomme des performances. Par conséquent, lorsque nous voulons dessiner des données d'écran répétées, une utilisation appropriée du canevas hors écran peut considérablement améliorer les performances. >

1.

Aucun cache n'est utilisé

　2.

Le cache est utilisé mais la largeur et la hauteur du canevas hors écran ne sont pas définies

3.

Le cache est utilisé mais la largeur et la hauteur du canevas hors écran ne sont pas définies

　4.

Utilisez la mise en cache et définissez la largeur et la hauteur du canevas hors écran

Vous pouvez voir que les performances de la DÉMO ci-dessus sont différentes. Analysons les raisons ci-dessous : Afin d'obtenir le style de chaque cercle, j'ai utilisé le dessin de boucles lors du dessin de cercles si la mise en cache n'est pas activée, lorsque le nombre de cercles. cercles sur la page Lorsqu'il atteint un certain point, un grand nombre d'appels d'API de canevas sont nécessaires pour chaque image de l'animation, et une grande quantité de calculs sont nécessaires, de sorte que quelle que soit la qualité du navigateur, il sera amené vers le bas.

Code XML/HTMLCopier le contenu dans le presse-papiers

1. ctx.save();   
2.                         var j=0;   
3.                         ctx.lineWidth = borderWidth;   
4.                         pour(var i=1;i<this.r;i =borderWidth){   
5.                             ctx.beginPath();   
6.                             ctx.StrokeStyle = ce.color[j];   
7.                             ctx.arc(this.x , this.y , i , 0 , 2*Math.PI);   
8.                             ctx.Stroke();   
9.                             j ;   
10.                         }   
11.                         ctx.restore();  

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

　　除了创建离屏canvas作为缓存之外，下面的代码中有一点很关键，就是要设置离屏canvas的宽度和高度，toile 生成后的默认大小是300X150；对于我的代码中每个缓存Il s'agit d'un appareil photo de 80 pouces, d'un panneau 300X150, d'un panneau de commande et d'un panneau de commande.浪费，所以就要设置一下离屏canvas的宽度和高度，让它跟缓存起来的元素大小一致，这样也有利于提高动画性能。上面的四个demo很明显的显示出了性能差距，如果没有设置宽高，当400 pièces de monnaie 1000 个圈圈对象也不觉得卡。

Code XML/HTML复制内容到剪贴板

1. var balle = fonction(x , y , vx , vy , useCache){   
2.                 this.x = x;   
3.                 this.y = y;   
4.                 this.vx = vx;   
5.                 this.vy = vy;   
6.                 this.r = getZ(getRandom(20,40));   
7.                 this.color = [];   
8.                 this.cacheCanvas = document.createElement("canvas");   
9.                 thisthis.cacheCtx = this.cacheCanvas.getContext("2d");   
10.                 this.cacheCanvas.width = 2*this.r;   
11.                 this.cacheCanvas.height = 2*this.r;   
12.                 var num = getZ(this.r/borderWidth);   
13.                 pour(var j=0;j<num;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.                 if(useCache){   
18.                     this.cache();   
19.                 }   
20.             }  

Lorsque j'instancie l'objet cercle, j'appelle directement la méthode cache, je dessine le cercle complexe directement dans le canevas hors écran de l'objet cercle et je l'enregistre.

Code XML/HTMLCopier le contenu dans le presse-papiers

1. cache:function(){
2. this.cacheCtx.save();
3. var j=0
4.  this.cacheCtx.lineWidth = borderWidth
;
5. pour(var i=1;i<this.r;i =borderWidth){
6. this.cacheCtx.beginPath();
7.  thisthis.cacheCtx.StrokeStyle = this.color[j];
this.cacheCtx.arc(this.r, this.r, i, 0, 2*Math.PI
8. <🎜); this.cacheCtx.Stroke();
9. j
10.                                                                      
11. this.cacheCtx.restore();
12.                                                                                     
13. Ensuite, dans l'animation suivante, il me suffit de dessiner le canevas hors écran de l'objet cercle dans le canevas principal. De cette façon, l'API canvas appelée dans chaque image n'a que cette phrase : .

Code XML/HTML

Copier le contenu dans le presse-papiers

ctx.drawImage(this.cacheCanvas , this.x-this.r , this.y-this.r

);

1. Par rapport au précédent dessin de boucle for, il est vraiment beaucoup plus rapide. Ainsi, lorsque nous devons dessiner à plusieurs reprises des graphiques vectoriels ou dessiner plusieurs images, nous pouvons raisonnablement utiliser le canevas hors écran pour mettre en cache les données d'image à l'avance, ce qui peut réduire considérablement la consommation de performances inutile dans chaque opération d'image ultérieure. Le code de la version fluide pour 1000 objets circulaires est publié ci-dessous :
　

Code XML/HTML

Copier le contenu dans le presse-papiers

1. >  
2. <html lang="fr" >  
3. <tête>  
4.     <meta charset="UTF- 8">  
5.     <style>  
6.         corps{   
7.             padding:0;   
8.             marge : 0 ;   
9.             débordement : masqué ;   
10.         }   
11.         #cas{   
12.             affichage : bloquer ;   
13.             couleur de fond:rgba(0,0,0,0);   
14.             margin:auto;   
15.             bordure : 1 px solide ;   
16.         }
17.  style> 
18.  <titre>Testtitre>
19. tête>
20. <corps>
21. <div >
22.  <toile id='cas' largeur="800" hauteur="600">Le navigateur ne prend pas en charge le canevascanvas > ;
23.  <div style="texte- align:center">1000 objets circulaires ne sont pas bloquésdiv>
24.  div> 
26.  <script> 
27. var testBox = fonction(){
28. var canvas = document.getElementById("cas"),
29. ctx = canvas.getContext('2d'),
30.  borderWidth = 2,
31. Balles = [];
var
32. balle = fonction(x, y, vx, vy, useCache){
 
33. this.x = x;  
this.y
34. = y  
this.vx
35. = vx;
36.                 this.vy = vy;   
37.                 this.r = getZ(getRandom(20,40));   
38.                 this.color = [];   
39.                 this.cacheCanvas = document.createElement("canvas");   
40.                 thisthis.cacheCtx = this.cacheCanvas.getContext("2d");   
41.                 this.cacheCanvas.width = 2*this.r;   
42.                 this.cacheCanvas.height = 2*this.r;   
43.                 var num = getZ(this.r/borderWidth);   
44.                 pour(var j=0;j<num;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.                 if(useCache){   
49.                     this.cache();   
50.                 }   
51.              }  
52.   
53.             fonction getZ(num){   
54.                 var arrondi ;   
55.                 arrondi = (0,5   num) | 0 ;   
56.                 // Un double bit-wise not.   
57.                 arrondi = ~~ (0,5   num);   
58.                 // Enfin, un décalage au niveau du bit vers la gauche.   
59.                 arrondi = (0,5   num) << 0;   
60.   
61.                 retour arrondi ;   
62.              }  
63.   
64.             ballon.prototype = {   
65.                 paint:function(ctx){   
66.                     if(!this.useCache){   
67.                         ctx.save();   
68.                         var j=0;   
69.                         ctx.lineWidth = borderWidth;   
70.                         pour(var i=1;i<this.r;i =borderWidth){   
71.                             ctx.beginPath();   
72.                             ctx.StrokeStyle = ce.color[j];   
73.                             ctx.arc(this.x , this.y , i , 0 , 2*Math.PI);   
74.                             ctx.Stroke();   
75.                             j ;   
76.                         }   
77.                         ctx.restore();   
78.                     } autre{   
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.                     pour(var i=1;i<this.r;i =borderWidth){   
88.                         this.cacheCtx.beginPath();   
89.                         thisthis.cacheCtx.StrokeStyle = this.color[j];   
90.                         this.cacheCtx.arc(this.r , this.r , i ,  0 , 2*Math.PI);   
91.                         this.cacheCtx.Stroke();   
92.                         j ;   
93.                     }   
94.                     this.cacheCtx.restore();   
95.                 },   
96.   
97.                 move:function(){   
98.                      this.x  = this.vx;   
99.                      this.y  = this.vy;   
100.                     if(this.x>(canvas.width-this.r)||this.x< this.r){   
101.                         thisthis.x=this.x<this.r?this.r:(canvas.width-this.r);   
102.                         this.vx = -this.vx;   
103.                     }  
104.                     if(this.y>(canvas.height-this.r)||this.y< this.r){   
105.                         thisthis.y=this.y<this.r?this.r:(canvas.height-this.r);   
106.                         this.vy = -this.vy;   
107.                     }   
108.   
109.                     this.paint(ctx);   
110.                 }   
111.              }   
112.   
113.             var Jeu = {   
114.                 init:function(){   
115.                     pour(var i=0;i<1000;i ){   
116.                         var b = nouveau ball(getRandom(0,canvas.width) , getRandom(0,canvas .height) , getRandom(-10 , 10) ,  getRandom(-10 , 10) , true)   
117.                         Balls.push(b);   
118.                     }   
119.                 },   
120.   
121.                 update:function(){   
122.                     ctx.clearRect(0,0,canvas.width,canvas.height);   
123.                     pour(var i=0;i<Balls.length;i ){   
124.                         Balles[i].move();   
125.                     }   
126.                 },   
127.   
128.                 loop:function(){   
129.                     var _this = this;   
130.                     this.update();   
131.                      RAF(function(){   
132.                         _this.loop();   
133.                     })   
134.                 },   
135.   
136.                 start:function(){   
137.                     this.init();   
138.                     this.loop();   
139.                 }   
140.              }   
141.   
142.             window.RAF = (function(){   
143.                 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (rappel) {window.setTimeout(callback, 1000 / 60) ; } ;   
144.             })();   
145.   
146.             retourner le jeu ;   
147.         }();   
148.   
149.         fonction getRandom(a , b){   
150.             return Math.random()*(b-a) a;   
151.         }   
152.   
153.         window.onload = fonction(){   
154.             testBox.start();   
155.         }   
156.     script>  
157. corps>  
158. html>