Tutorial tentang mencipta kesan bunga api dengan kemahiran tutorial HTML5_html5

Sekarang Tahun Baru Cina, dan apa yang saya boleh fikirkan semasa Tahun Baharu Cina ialah menyalakan bunga api. . . . Jadi saya menggunakan kanvas untuk menulis kesan bunga api Mengklik tetikus juga akan menghasilkan bunga api, tetapi tidak menghasilkan terlalu banyak bunga api Zarah yang dipancarkan oleh bunga api adalah antara 30 dan 200. Apabila bilangan zarah pada halaman mencapai tertentu. Kadangkala, halaman itu akan menjadi sangat tersekat, dan saya tidak sengaja mengoptimumkan Shenma. Mari kita bercakap mengenainya kemudian apabila kita mempunyai masa.

Pergi terus ke DEMO: Nyalakan bunga api

Prinsipnya sangat mudah. . . Hanya tulis kelas bunga api dan kelas serpihan, buat seketika dan biarkan ia terbang Kemudian apabila ia mencapai titik tertentu, tetapkan atribut mati objek bunga api kepada benar, kemudian nyatakan sejumlah objek serpihan, dan berikan Just buat secara rawak. titik sasaran untuk dicapai oleh objek serpihan, dan kemudian biarkan semua objek serpihan terbang ke sana.

【Bunga Bunga】

Kod XML/HTMLSalin kandungan ke papan keratan

1. var Boom = fungsi(x,r,c,boomArea,shape){  / /烟火对象   
2.              ini.boom = [];   
3.             ini.x = x;   
4.              ini.y = (kanvas.tinggi r);   
5.             ini.r = r;   
6.             ini.c = c;   
7.             ini.bentuk = bentuk | palsu;   
8.             ni.boomArea = boomArea;   
9.              ini.theta = 0;   
10.              ini.mati = palsu;   
11.             ini.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 = ini.c;   
19.                 ctx.fill();   
20.                 ctx.restore();   
21.             },   
22.             _move:function(){   
23.                  var dx = ini.boomArea.x -  = ini.boomArea.x -  = 
ini
24. .boomArea.y - this.y;                    ini
ini.x
25.  = ini.x dx*0.01;                    ini
ini.y
26.  = ini.y dy*0.01;   
27.                    jika(Math.abs(dx)<=this.ba && Math.abs(dy)
<
28. <<
=ini.ba){   
                    jika (bentuk.ini){   
                        ini._shapBoom();   
                    }   
32.                     lain ini._boom();                        ini.mati
 = 
33. benar
;   
                }   
                lain {   
                    ini._paint();   
                }   
            },   
            _drawLight:function(){   
40.                 ctx.save();                    ctx.fillStyle
 = 
41. "rgba(255,228,150,0.3)">
  
                ctx.beginPath();   
                ctx.arc(this.x , this.y , this.r 3*Math.random() 1 , 0 , 2*Math.PI);   
                ctx.fill();   
45.                 ctx.restore();                },   
46.             _boom:function(){    //普通爆炸   
47.                 var fragNum = getRandom(30 , 200);   
48.                 var gaya = getRandom(0,10) =5? 1 : 2;   
49.                 warna var;   
50.                 jika(gaya===1){   
51.                     warna = {   
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.                  untuk(var i=0;i<><> 🎜>fragNum;i ){   
60.                     jika(gaya===2){   
61.                          warna = {   
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) (s. ) ;   
69.                     var y = getRandom(0, fanwei) (s.a.) y;    
70.                     var jejari = getRandom(0 , 2)  >
                    var 
71. frag = baharu Frag(ini.x  , ini.                                             y );   
                    this.booms.push(frag);   
                }   
            },   
            _shapBoom:function(){    //有形状的爆炸   
                var 
76. bahawa = ini;   
                putValue(ocas , octx , this.shape , 5, function(dots){   
                    var 
78. dx = kanvas.lebar/2-that.x;   
                    var 
79. dy = kanvas.height/2-that.y;   
                    untuk(var 
80. i=0;i< 🎜>titik.panjang;i ){                             
warna
81.  = {a:dots[i].a,b:dots[i].b,c:dots[i].c}  
82.                          var x = titik[i].x;   
83.                         var y = titik[i].y;   
84.                         var jejari = 1;   
85.                         var frag = baharu Frag(that.x  , Frag(that.x  , that.x  , dx , y-dy);   
86.                         itu.booms.push(frag);   
87.                     }   
88.                 })   
89.             }   
90.         }   

　　【碎屑】

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

1. var Frag = fungsi(centerX , centerY , radius , warna ,tx , ty) {   //烟火碎屑对象   
2.             ini.tx = tx;   
3.             this.ty = ty;   
4.              ini.x = centerX;   
5.              ini.y = centerY;   
6.              ini.mati = palsu;   
7.             ini.centerX = centerX;   
8.             ini.centerY = centerY;   
9.             ini.jejari = jejari;   
10.             warna ini = warna;   
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.a "," this.color.a "," this. b "," this.color.c ",1)";   
19.                 ctx.fill()   
20.                 ctx.restore();   
21.             },   
22.             moveTo:function(index){   
23.                 inithis.ty = this.ty 0.3;   
24.                 var dx = ini.tx - ini.x , > > = ini.ty - this.y;   
                
25. ini.x = Matematik.abs(dx)0.1 ? this.tx : (this.x dx*0.1);   
26.                 ini.y = Matematik.abs(dy) >0.1 ? this.ty : (this.y dy*0.1);   
27.                  jika(dx===0 && Math.abs(dy)<=80)
28.                     ini.mati = benar;   
29.                 }   
30.                 ini.cat();   
31.             }   
32.         }  

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

           

Kod 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();  

Biarkan bunga api membentuk bentuk yang anda inginkan, seperti fon, gambar, dsb. Anda juga boleh melakukannya melalui kanvas luar skrin dan kaedah getImageData pada kanvas. Kanvas luar skrin, seperti namanya, ialah kanvas yang tidak kelihatan Anda boleh menggunakan document.createElement("kanvas") secara langsung dalam js untuk menjana objek dom kanvas selagi objek dom tidak diberikan kepada badan, ini Objek kanvas adalah bersamaan dengan objek luar skrin Kami boleh mendapatkan objek konteks kanvas luar skrin ini, dan kemudian melakukan apa sahaja yang kami mahu lakukan di tempat pengguna tidak dapat melihatnya.

Untuk menjadikan bunga api membentuk bentuk yang anda inginkan, anda mula-mula melukis teks atau gambar pada kanvas luar skrin, kemudian gunakan getImageData untuk mendapatkan tatasusunan piksel pada kanvas, dan kemudian melintasi tatasusunan untuk mendapatkan piksel berwarna, yang kita mahukan Selepas kandungan disimpan, ia dipaparkan dalam objek kanvas utama.

Saya telah bercakap tentang pemprosesan piksel getImageData dalam blog saya sebelum ini. Jika anda tidak tahu cara menggunakannya, sila klik di sini: Mari kita bincangkan tentang menggunakan kanvas untuk mencapai pembahagian teks dan gambar

.

Alamat kod sumber: https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Funny-demo/shotFire