Tutoriel sur la création d'effets de feux d'artifice avec les compétences du didacticiel HTML5_html5

C'est le Nouvel An chinois, et tout ce à quoi je peux penser pendant le Nouvel An chinois, c'est allumer des feux d'artifice. . . . J'ai donc utilisé Canvas pour écrire un effet de feu d'artifice. Cliquer sur la souris produira également un feu d'artifice, mais ne produira pas trop de feux d'artifice. Les particules émises par un feu d'artifice sont comprises entre 30 et 200. Lorsque le nombre de particules sur la page atteint un certain. Parfois, la page sera très bloquée et je n'ai pas délibérément optimisé Shenma. Parlons-en plus tard quand nous aurons le temps.

Accédez directement à la DÉMO : Déclenchez des feux d'artifice

Le principe est très simple. . . Écrivez simplement une classe de feu d'artifice et une classe de débris, instanciez-la et laissez-la voler. Ensuite, lorsqu'elle atteint un certain point, définissez l'attribut mort de l'objet feu d'artifice sur true, puis instanciez un certain nombre d'objets débris et donnez-le simplement au hasard. un point cible que les débris doivent atteindre, puis laissez tous les débris voler là-bas.

【Feux d'artifice】

Code XML/HTMLCopier le contenu dans le presse-papiers

1. var Boom = fonction(x,r,c,boomArea,shape){  / /烟火对象   
2.             this.booms = [];   
3.             this.x = x;   
4.             this.y = (canvas.height r);   
5.             this.r = r;   
6.             this.c = c;   
7.             this.shape = forme || FAUX;   
8.             this.boomArea = boomArea;   
9.             this.theta = 0;   
10.             this.dead = faux;   
11.             this.ba = parseInt(getRandom(80 , 200));   
12.         }   
13.         Boom.prototype = {   
14.             _paint:function(){     
15.                 ctx.save();   
16.                 ctx.beginPath();   
17.                 ctx.arc(this.x,this.y,this.r,0,2*Math.PI);   
18.                 ctx.fillStyle = this.c;   
19.                 ctx.fill();   
20.                 ctx.restore();   
21.              },   
22.             _move:function(){   
23.                 var dx = this.boomArea.x - this.x , dy  = this.boomArea.y - this.y;   
24.                 thisthis.x = this.x dx*0.01;   
25.                 thisthis.y = this.y dy*0.01 ;   
26.   
27.                 if(Math.abs(dx)<=this.ba && Math.abs(dy)< =this.ba){   
28.                      if(this.shape){   
29.                         this._shapBoom();   
30.                     }   
31.                      else this._boom();   
32.                     this.dead = vrai;   
33.                 }   
34.                 autre {   
35.                     this._paint();   
36.                 }   
37.              },   
38.             _drawLight:function(){   
39.                 ctx.save();   
40.                 ctx.fillStyle = "rgba(255,228,150,0.3)";   
41.                 ctx.beginPath();   
42.                 ctx.arc(this.x , this.y , this.r 3*Math.random() 1 , 0 , 2*Math.PI);   
43.                 ctx.fill();   
44.                 ctx.restore();   
45.              },   
46.             _boom:function(){    //普通爆炸   
47.                 var fragNum = getRandom(30 , 200);   
48.                 var style = getRandom(0,10)> =5 ? 1 : 2 ;   
49.                 var color ;   
50.                 if(style===1){   
51.                     couleur = {   
52.                         a:parseInt(getRandom(128,255)),   
53.                         b:parseInt(getRandom(128,255)),   
54.                         c:parseInt(getRandom(128,255))   
55.                     }   
56.                 }   
57.   
58.                 var fanwei = parseInt(getRandom(300, 400));   
59.                 pour(var i=0;i<fragNum;i ){   
60.                     if(style===2){   
61.                         couleur = {   
62.                             a:parseInt(getRandom(128,255)),   
63.                             b:parseInt(getRandom(128,255)),   
64.                             c:parseInt(getRandom(128,255))   
65.                         }   
66.                     }  
67.                     var a = getRandom(-Math.PI, Math.PI);   
68.                     var x = getRandom(0, fanwei) * Math.cos(a)   this.x;   
69.                     var y = getRandom(0, fanwei) * Math.sin(a)   this.y;    
70.                     var radius = getRandom(0 , 2)   
71.                     var frag = nouveau Frag(this.x , this.y , radius , color , x , y );   
72.                     this.booms.push(frag);   
73.                 }   
74.              },   
75.             _shapBoom:function(){    //有形状的爆炸   
76.                 var que = ce ;   
77.                 putValue(ocas , octx , this.shape , 5, function(dots){   
78.                     var dx = canvas.width/2-that.x;   
79.                     var dy = toile.height/2-that.y;   
80.                     pour(var i=0;i<dots.length;i ){   
81.                         couleur = {a:dots[i].a,b:dots[i].b,c:dots[i].c}  
82.                         var x = points[i].x;   
83.                         var y = points[i].y;   
84.                         var rayon = 1;   
85.                         var frag = nouveau Frag(that.x , that.y , radius , color , x- dx , y-dy);   
86.                         that.booms.push(frag);   
87.                     }   
88.                 })   
89.              }   
90.         }   

　　【碎屑】

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

1. var Frag = fonction(centerX , centerY , radius , color ,tx , ty) {   //烟火碎屑对象   
2.             this.tx = tx;   
3.             this.ty = ty;   
4.             this.x = centerX;   
5.             this.y = centerY;   
6.             this.dead = faux;   
7.             this.centerX = centerX;   
8.             this.centerY = centerY;   
9.             this.radius = rayon ;   
10.             this.color = couleur;   
11.         }   
12.   
13.         Frag.prototype = {   
14.             paint:function(){   
15.                 ctx.save();   
16.                 ctx.beginPath();   
17.                 ctx.arc(this.x , this.y , this.radius , 0 , 2*Math.PI);   
18.                 ctx.fillStyle = "rgba(" this.color.a "," this.color. b "," this.color.c ",1)";   
19.                 ctx.fill()   
20.                 ctx.restore();   
21.              },   
22.             moveTo:function(index){   
23.                 thisthis.ty = this.ty 0.3 ;   
24.                 var dx = this.tx - this.x , dy = this.ty - this.y;   
25.                 this.x = Math.abs(dx)<0,1 ? this.tx  : (this.x dx*0.1) ;   
26.                 this.y = Math.abs(dy)<0,1 ? this.ty  : (this.y dy*0.1) ;   
27.                 if(dx===0 && Math.abs(dy)<=80){
28.                     this.dead = vrai;   
29.                 }   
30.                 this.paint();   
31.              }   
32.         }  

　　让碎屑产生虚影也很简单，就是每次刷新画布时，不是擦掉重绘，而是绘制透明度为0.1（如果想虚影更长，可以把这个值弄的更小）的背景颜色。然后虚影就可以做出来了。也就是：

           

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

1. ctx.save();   
2.             ctx.fillStyle = "rgba(0,5,24,0.1)";   
3.             ctx.fillRect(0,0,canvas.width,canvas.height);   
4.             ctx.restore();  

Laissez les feux d'artifice former la forme que vous souhaitez, comme des polices, des images, etc. C'est également très simple. Vous pouvez le faire via le canevas hors écran et la méthode getImageData du canevas. Le canevas hors écran, comme son nom l'indique, est un canevas invisible. Vous pouvez utiliser document.createElement("canvas") directement dans js pour générer un objet dom canevas tant que l'objet dom n'est pas affecté au corps, ceci. L'objet canevas est équivalent à un objet hors écran. Nous pouvons obtenir l'objet contextuel de ce canevas hors écran, puis faire ce que nous voulons là où l'utilisateur ne peut pas le voir.

Pour donner au feu d'artifice la forme souhaitée, vous dessinez d'abord le texte ou l'image sur le canevas hors écran, puis utilisez getImageData pour obtenir le tableau de pixels sur le canevas, puis parcourez le tableau pour obtenir les pixels colorés, c'est ce que nous voulons. Une fois le contenu enregistré, il est affiché dans l'objet canevas principal.

J'ai parlé du traitement des pixels de getImageData dans mon blog précédent. Si vous ne savez pas comment l'utiliser, veuillez cliquer ici : Parlons de l'utilisation de Canvas pour réaliser la particuleisation du texte et des images

.

Adresse du code source : https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Funny-demo/shotFire