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;ithis.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;jnum;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;ithis.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. html>  
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;jnum;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;ithis.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;ithis.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.xthis.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.ythis.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;i1000;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;iBalls.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>  

Il y a une autre remarque concernant le canevas hors écran. Si l'effet que vous faites est de créer et de détruire continuellement des objets, veuillez utiliser le canevas hors écran avec prudence. Au moins, ne liez pas les attributs de chaque objet comme je l'ai écrit ci-dessus. Définir une toile hors écran.

Parce que s'il est lié de cette manière, lorsque l'objet est détruit, le canevas hors écran sera également détruit, et un grand nombre de canevas hors écran sont constamment créés et détruits, ce qui entraînera une consommation de tampon du canevas. beaucoup de ressources GPU et provoquent facilement un crash du navigateur ou un gel important de l'image. La solution consiste à créer un tableau de canevas hors écran, à précharger un nombre suffisant de canevas hors écran, à mettre en cache uniquement les objets encore vivants et à les libérer du cache lorsque les objets sont détruits. Cela n’entraînera pas la destruction du canevas hors écran.

【Utiliser requestAnimationFrame】

Je n'expliquerai pas cela en détail. Je suppose que beaucoup de gens savent que c'est la meilleure boucle pour l'animation, pas setTimeout ou setInterval. Postez directement la méthode d'écriture de compatibilité :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. window.RAF = (function(){
2. Retour window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || fonction (rappel) {window.setTimeout(callback, 1000 / 60 });
3. })();

　

【Évitez les opérations en virgule flottante】

Bien que JavaScript fournisse des méthodes d'arrondi très pratiques, telles que Math.floor, Math.ceil et parseInt, des amis étrangers ont effectué des tests et la méthode parseInt effectue un travail supplémentaire (comme détecter si les données sont une valeur valide, parseInt convertit même le paramètre en chaîne en premier !), donc utiliser directement parseInt est relativement plus gourmand en performances. Alors, comment arrondir, vous pouvez directement utiliser une méthode très intelligente écrite par des étrangers :

.

Code JavaScriptCopier le contenu dans le presse-papiers
1.arrondi = (0,5 somenum) 0;
2.arrondi = ~~ (0,5 somenum); 3.arrondi = (0,5 somenum) Si vous ne comprenez pas les opérateurs, vous pouvez simplement cliquer ici :
http://www.w3school.com.cn/js/pro_js_operators_bitwise.asp
Il y a des explications détaillées à l'intérieur

　

【Réduisez autant que possible les appels à CanvasAPI】

Lorsque vous créez des effets de particules, essayez d'utiliser le moins de cercles possible et utilisez de préférence des carrés. Parce que les particules sont trop petites, les carrés ressemblent à des cercles. Quant à la raison, elle est facile à comprendre. Nous avons besoin de trois étapes pour dessiner un cercle : d'abord commencerPath, puis utiliser arc pour dessiner un arc, puis utiliser fill pour le remplir afin de produire un cercle. Mais pour dessiner un carré, vous n’avez besoin que d’un seul fillRect. Bien qu'il n'y ait qu'une différence de deux appels, lorsque le nombre d'objets particules atteint un certain niveau, l'écart de performances apparaîtra.

Il y a d’autres choses à noter, je ne les énumérerai pas toutes car il y en a pas mal sur Google. Cela peut être considéré comme un enregistrement pour moi-même, principalement pour enregistrer l'utilisation du cache. Si vous souhaitez améliorer les performances de Canvas, le plus important est de prêter attention à la structure du code, de réduire les appels d'API inutiles, de réduire les opérations complexes dans chaque image ou de modifier les opérations complexes d'une fois pour chaque image à une fois pour plusieurs. cadres. En même temps, pour l'utilisation du cache mentionnée ci-dessus, pour plus de commodité, j'ai utilisé un canevas hors écran pour chaque objet. En fait, le canevas hors écran ne peut pas être utilisé de manière trop intensive. Il y aura des problèmes de performances. Veuillez faire de votre mieux. Faites un usage raisonnable du canevas hors écran.

Adresse du code source :

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