Tutorial zum Erstellen von Feuerwerkseffekten mit HTML5_html5-Tutorialkenntnissen

Es ist das chinesische Neujahr und alles, woran ich während des chinesischen Neujahrs denken kann, ist, ein Feuerwerk zu zünden. . . . Also habe ich Canvas verwendet, um einen Feuerwerkseffekt zu schreiben, der ebenfalls ein Feuerwerk erzeugt, aber nicht zu viele Feuerwerkskörper erzeugt. Die von einem Feuerwerk emittierten Partikel liegen zwischen 30 und 200. Wenn die Anzahl der Partikel auf der Seite einen bestimmten Wert erreicht Manchmal bleibt die Seite sehr hängen und ich habe Shenma nicht absichtlich optimiert. Lass uns später darüber reden, wenn wir Zeit haben.

Gehe direkt zur DEMO: Feuerwerk zünden

Das Prinzip ist ganz einfach. . . Schreiben Sie einfach eine Feuerwerksklasse und eine Trümmerklasse, instanziieren Sie sie und lassen Sie sie fliegen. Wenn Sie dann einen bestimmten Punkt erreichen, setzen Sie das Dead-Attribut des Feuerwerksobjekts auf true, instanziieren Sie dann eine bestimmte Anzahl von Trümmerobjekten und geben Sie „Einfach zufällig erstellen“ ein Legen Sie einen Zielpunkt fest, den die Trümmerobjekte erreichen sollen, und lassen Sie dann alle Trümmerobjekte dorthin fliegen.

【Feuerwerk】

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. var Boom = function(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 = Form || FALSCH;   
8.             this.boomArea = boomArea;   
9.             this.theta = 0;   
10.             this.dead = false;   
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.                                         }                    sonst {   
33.                     this._paint();   
34.                 }   
35.             },   
36.             _drawLight:function(){   
37.                 ctx.save();   
38.                    
39.                 ctx.beginPath();   
40.                 ctx.arc(this.x , this.y , this.r 3*Math.random() 1 , 0 , 2*Math.PI);                    ctx.fill();                    ctx.restore();   
41.             },   
42.             _boom:function(){    //普通爆炸   
43.                 var fragNum = getRandom(30 , 200);   
44.                 var style = getRandom(0,10)> =5? 1 : 2;   
45.                 var color;   
46.                 if(style===1){   
47.                     Farbe = {   
48.                         a:parseInt(getRandom(128,255)),   
49.                         b:parseInt(getRandom(128,255)),   
50.                         c:parseInt(getRandom(128,255))   
51.                     }   
52.                 }   
53.   
54.                 var fanwei = parseInt(getRandom(300, 400));   
55.                 for(var i=0;ifragNum;i ){   
56.                     if(style===2){   
57.                         Farbe = {   
58.                             a:parseInt(getRandom(128,255)),   
59.                             b:parseInt(getRandom(128,255)),   
60.                             c:parseInt(getRandom(128,255))   
61.                         }   
62.                     }  
63.                     var a = getRandom(-Math.PI, Math.PI);   
64.                     var x = getRandom(0, fanwei) * Math.cos(a)   this.x;   
65.                     var y = getRandom(0, fanwei) * Math.sin(a)   this.y;    
66.                     var radius = getRandom(0 , 2)   
67.                     var frag = new Frag(this.x , this.y , radius , color , x , y );   
68.                     this.booms.push(frag);   
69.                 }   
70.             },   
71.             _shapBoom:function(){    //有形状的爆炸   
72.                 var das = dies;   
73.                 putValue(ocas , octx , this.shape , 5, function(dots){   
74.                     var dx = canvas.width/2-that.x;   
75.                     var dy = canvas.height/2-that.y;   
76.                     for(var i=0;idots.length;i ){   
77.                           
78.                         var x = Punkte[i].x;   
79.                         var y = Punkte[i].y;   
80.                         var Radius = 1;   
81.                         var frag = new Frag(that.x , that.y , radius , color , x- dx , y-dy);   
82.                         that.booms.push(frag);   
83.                     }   
84.                 })   
85.             }   
86.         }   

　　【碎屑】

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

1. var Frag = Funktion(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 = false;   
7.             this.centerX = centerX;   
8.             this.centerY = centerY;   
9.             this.radius = radius;   
10.             this.color = color;   
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.                 b "," this.color.c ",1)";                    ctx.fill()                    ctx.restore();   
19.             },   
20.             moveTo:function(index){   
21.                 thisthis.ty = this.ty 0.3;   
22.                 var dx = this.tx - this.x , dy = this.ty - this.y;   
23.                 >0,1 ? this.tx : (this.x dx*0.1);                    >0,1 ? this.ty : (this.y dy*0.1);                    if(
dx
24. ===0 && Math.abs(dy)=80){                                         }   
                this.paint();   
25.             }            }  
26. 　　让碎屑产生虚影也很简单,就是每次刷新画布时,不是擦掉重绘,而是绘制透明度为0.1（如果想虚影更长，可以把这个值弄的更小）的背景颜色.然后虚影就可以做出来了.也就是:             XML/HTML-Code复制内容到剪贴板
28. ctx.save();   
29.             
30. ctx.fillStyle = 

"rgba(0,5,24,0.1)"

;   

            ctx.fillRect(0,0,canvas.width,canvas.height);   

            ctx.restore();  

Lassen Sie das Feuerwerk die gewünschte Form annehmen, z. B. Schriftarten, Bilder usw. Dies ist auch sehr einfach über die Off-Screen-Leinwand und die getImageData-Methode der Leinwand möglich. Off-Screen-Canvas ist, wie der Name schon sagt, eine unsichtbare Leinwand. Sie können document.createElement("canvas") direkt in js verwenden, um ein Canvas-Dom-Objekt zu generieren Das Canvas-Objekt entspricht einem Off-Screen-Objekt. Wir können das Kontextobjekt dieser Off-Screen-Canvas abrufen und dann tun, was wir wollen, wo der Benutzer es nicht sehen kann.

Damit das Feuerwerk die gewünschte Form erhält, zeichnen Sie zunächst den Text oder das Bild auf der Leinwand außerhalb des Bildschirms, verwenden dann getImageData, um das Pixel-Array auf der Leinwand abzurufen, und durchlaufen dann das Array, um die farbigen Pixel zu erhalten. Das ist es, was wir wollen. Nachdem der Inhalt gespeichert wurde, wird er im Haupt-Canvas-Objekt angezeigt.

Ich habe in meinem vorherigen Blog über die Pixelverarbeitung von getImageData gesprochen. Wenn Sie nicht wissen, wie man sie verwendet, klicken Sie bitte hier: Lassen Sie uns über die Verwendung von Canvas sprechen, um eine Partikelisierung von Text und Bildern zu erreichen

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