Contoh tutorial HTML5 Canvas super cool kembang api mekar kod pelaksanaan kemahiran tutorial_html5

Ini adalah animasi Kanvas HTML5 yang hebat. Ia akan mensimulasikan kesan khas animasi bunga api yang mekar dalam kehidupan sebenar kita. Kesannya sangat realistik, tetapi ia adalah simulasi komputer ia, kesannya masih agak teruk, hehe. Satu perkara yang luar biasa tentang animasi Kanvas HTML5 ini ialah prestasinya pada dasarnya tiada lag pada Chrome, walaupun anda menyalakan banyak bunga api.

Mari analisa secara ringkas proses dan kod untuk melaksanakan kesan khas bunga api HTML5 ini, terutamanya kod HTML, kod CSS dan kod Javascript.

　Kod HTML:

Kod XML/HTMLSalin kandungan ke papan keratan

1. <div id=”gui”>div>
2. <div id=”bekas kanvas”> <div id=”gunung2″>div> 
3. <div id=”gunung1″ >div><div id=”skyline”>div> div>

Struktur HTML adalah sangat mudah, iaitu bekas kanvas dibina dan kami akan menggunakan JS untuk menjana objek Kanvas dalam bekas ini. Anda akan mengetahuinya dengan melihat kod JS akhir.

　Kod CSS:

Kod CSSSalin kandungan ke papan keratan

1. #kanvas-bekas { latar belakang: #000 url(bg.jpg); tinggi: 400px; kiri: 50%; margin: -200px 0 0 -300px; kedudukan: mutlak; atas: 50%; lebar: 600px; z-indeks: 2;   
2. } kanvas { kursor: palang silang; paparan: sekat; kedudukan: saudara; z-indeks: 3;   
3. } kanvas:aktif { kursor: palang silang;   
4. } #skyline { latar belakang: url (skyline.png) ulang-x 50% 0; bawahbawah: 0; tinggi: 135px; kiri: 0; kedudukan: mutlak; lebar: 100%; z-indeks: 1;       
5. } #mountains1 { latar belakang: url (gunung1.png) ulang-x 40% 0; bawahbawah: 0; tinggi: 200px; kiri: 0; kedudukan: mutlak; lebar: 100%; z-indeks: 1;       
6. } #mountains2 { latar belakang: url (gunung2.png) ulang-x 30% 0; bawahbawah: 0; tinggi: 250px; kiri: 0; kedudukan: mutlak; lebar: 100%; z-indeks: 1;       
7. } #gui { kanankanan: 0; kedudukan: tetap; atas: 0; z-indeks: 3;   
8. }  

Kod CSS bukanlah sesuatu yang istimewa, ia mentakrifkan warna latar belakang dan sempadan.

Seterusnya ialah kod Javascript yang paling penting.

　Kod JavaScript:

Kod JavaScriptSalin kandungan ke papan keratan

1. self.init = fungsi(){       
2.     self.dt = 0;   
3.         self.oldTime = Date.now();   
4.         self.canvas = document.createElement('canvas');                   
5.         self.canvasContainer = $('#canvas-container'); var canvasContainerDisabled = document.getElementById('canvas-container');   
6.         self.canvas.onselectstart = fungsi() { return false >;   
7.         };   
8.   
9.         self.canvas.width = self.cw = 600;   
10.         self.canvas.height = self.ch = 400;       
11.   
12.         zarah diri = [];       
13.         self.partCount = 30;   
14.         bunga api sendiri = [];       
15.         self.mx = self.cw/2;   
16.         self.my = self.ch/2;   
17.         self.currentHue = 170;   
18.         self.partSpeed = 5;   
19.         self.partSpeedVariance = 10;   
20.         self.partWind = 50;   
21.         self.partFriction = 5;   
22.         self.partGravity = 1;   
23.         self.hueMin = 150;   
24.         self.hueMax = 200;   
25.         self.fworkSpeed = 2;   
26.         self.fworkAccel = 4;   
27.         self.hueVariance = 30;   
28.         self.flickerDensity = 20;   
29.         self.showShockwave = palsu;   
30.         self.showTarget = benar;   
31.         self.clearAlpha = 25;   
32.   
33.         self.canvasContainer.append(self.canvas);   
34.         self.ctx = self.canvas.getContext('2d');   
35.         self.ctx.lineCap = 'bulat';   
36.         self.ctx.lineJoin = 'bulat';   
37.         self.lineWidth = 1;   
38.         self.bindEvents();               
39.         self.canvasLoop();   
40.   
41.         self.canvas.onselectstart = fungsi() { return false >;   
42.         };   
43.   
44.     };  

Kod JS ini terutamanya membina objek Kanvas dalam bekas kanvas, dan memulakan penampilan dan sifat animasi objek kanvas.

Kod JavaScriptSalin kandungan ke papan keratan

1. var Zarah = fungsi(x, y, warna){ ini.x = x; ini.y = y; ini.coordLast = [   
2.             {x: x, y: y},   
3.             {x: x, y: y},   
4.             {x: x, y: y}   
5.         ]; ini.sudut = rand(0, 360); ini.speed = rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeedVariance bahagianSpeedVariance)); ini.geseran = 1 - diri.partFriction/100; ini.gravity = self.partGravity/2; ini.hue = rand(hue-self.hueVariance, hue self.hueVariance); ini.kecerahan = rand(50, 80); ini.alpha = rand(40,100)/100; ini.pereputan = rand(10, 50)/1000; ini.wind = (rand(0, self.partWind) - (self.partWind/2))/25; ini.lineWidth = self.lineWidth;   
6.     };   
7.   
8.     Particle.prototype.update = fungsi(indeks){ var radian =  ini.sudut * Math.PI / 180; var vx = Math.cos(radians) * ini.speed; var vy = Math.sin(radians) * ini.speed   ini .graviti; ini.kelajuan *= ini.geseran; ini.coordLast[2].x = ini.coordLast[1].x; ini.coordLast[2].y = ini.coordLast[1].y; ini.coordLast[1].x = ini.coordLast[0].x; ini.coordLast[1].y = ini.coordLast[0].y; ini.coordLast[0].x = ini.x; ini.coordLast[0].y = ini.y; ini.x  = vx * self.dt; ini.y  = vy * self.dt; ini.sudut  = ini.angin; ini.alpha -= ini.pereputan; jika(!hitTest(0,0,self.cw,self.ch,ini.x-ini.jejari, ini.y-ini.jejari, ini .jejari*2, ini.jejari*2) |  ini.alpha < ){                       
9.             self.particles.splice(indeks, 1);       
10.         }               
11.     };   
12.   
13.     Particle.prototype.draw = fungsi(){ var coordRand = (rand(1,3) -1);   
14.         self.ctx.beginPath();                                   
15.         self.ctx.moveTo(Math.round(ini.coordLast[coordRand].x), Math.round(ini.coordLast[coordRand].y));   
16.         self.ctx.lineTo(Math.round(ini.x), Math.round(ini .y));   
17.         self.ctx.closePath();                   
18.         self.ctx.strokeStyle = 'hsla(' ini.hue <🎜 , 100%, ' ini.kecerahan '%, ' ini.alfa ')';   
19.         self.ctx.stroke(); jika(self.flickerDensity > 0){ var inverseDensity = 50 - self.flickerDensity; jika(rand(0, inverseDensity) === inverseDensity){   
20.                 self.ctx.beginPath();   
21.                 self.ctx.arc(Math.round(ini.x), Math.round(ini .y), rand(ini.lineWidth,ini.lineWidth 3)/2, 0, Math.PI*2, palsu)  self.ctx.closePath(); var randAlpha = rand(50,100)/100;   
22.                 self.ctx.fillStyle = 'hsla(' ini.hue .hue . , 100%, ' ini.kecerahan '%, ' randAlpha ' )';   
23.                 self.ctx.fill();   
24.             }       
25.         }   
26.     };  

　　这段JS代码的功能是实现烟花爆炸后的小颗粒的绘制，从draw方法中可店以，可以，小颗粒的绘制。点，烟花颗粒即可在这个范围的随机点中散落。

Kod JavaScript复制内容到剪贴板

1. var Bunga api = fungsi(startX, startY, targetX, targetY){ ini.x = startX; ini.y = startY; ini.startX = startX; ini.startY = startY; ini.hitX = salah; ini.hitY = palsu; ini.coordLast = [   
2.             {x: startX, y: startY},   
3.             {x: startX, y: startY},   
4.              {x: startX, y: startY}   
5.         ]; ini.targetX = targetX; ini.targetY = targetY; ini.speed = self.fworkSpeed; ini.angle = Math.atan2(targetY - startY, targetX - startX); ini.shockwaveAngle = Math.atan2(targetY - startY, targetX - startX) (90*(Math.PI/180)); ini.pecutan = self.fworkAccel/100; ini.hue = self.currentHue; ini.kecerahan = rand(50, 80); ini.alpha = rand(50,100)/100; ini.lineWidth = self.lineWidth; ini.targetRadius = 1;   
6.     };   
7.   
8.     Firework.prototype.update = fungsi(indeks){   
9.         self.ctx.lineWidth = ini.lineWidth;   
10.   
11.         vx = Math.cos(ini.sudut) * ini.kelajuan,   
12.         vy = Math.sin(ini.sudut) * ini.kelajuan; ini.kelajuan *= 1   ini.pecutan; ini.coordLast[2].x = ini.coordLast[1].x; ini.coordLast[2].y = ini.coordLast[1].y; ini.coordLast[1].x = ini.coordLast[0].x; ini.coordLast[1].y = ini.coordLast[0].y; ini.coordLast[0].x = ini.x; ini.coordLast[0].y = ini.y; jika(self.showTarget){ jika(ini.targetRadius < 8){ ini.targetRadius  = .25 * self.dt;   
13. <🎜>            } lain { ini.targetRadius = 1 * self.dt;       
14.             }   
15.         } jika(ini.startX >= iniini 🎜>.targetX){ jika(ini.x   vx <= ini.targetX){ ini.x = ini.targetX; ini.hitX = benar;   
16.             } lain { ini.x  = vx * self.dt;   
17.             }   
18.         } lain { jika(ini.x vx >= ini.targetX){ ini.x = ini .targetX; ini.hitX = benar;   
19.             } lain { ini.x  = vx * self.dt;   
20.             }   
21.         } jika(ini.startY >= ini.targetY){ jika(ini.y   vy <= ini.targetY){ ini.y = ini.targetY; ini.hitY = benar;   
            } 
22. lain { ini.y  = vy * self.dt;   
            }   
        } 
24. lain { jika(ini.y vy >= ini.targetY){ ini.y = ini .targetY; ini.hitY = benar;   
            } 
25. lain { ini.y  = vy * self.dt;   
            }   
        } jika(ini.hitX && ini.hitY){  var randLetupan = rand(0, 9);   
27.             self.createParticles(ini.targetX, ini.targetY, ini 🎜>.hue);   
28.             diri.bunga api.splice(indeks, 1);                       
29.         }   
30.     };   
31.   
32.     Firework.prototype.draw = fungsi(){   
33.         self.ctx.lineWidth = ini.lineWidth; var coordRand = (rand(1,3)-1);                       
34.         self.ctx.beginPath();                               
35.         self.ctx.moveTo(Math.round(ini.coordLast[coordRand].x), Math.round(ini.coordLast[coordRand].y));   
36.         self.ctx.lineTo(Math.round(ini.x), Math.round(ini .y));   
37.         self.ctx.closePath();   
38.         self.ctx.strokeStyle = 'hsla(' ini.hue ini.kecerahan '%, ' ini.alfa ')';   
        self.ctx.stroke(); 
39. jika(self.showTarget){   
            self.ctx.save();   
            self.ctx.beginPath();   
            self.ctx.arc(Math.round(
42. ini.targetX), Math.round(ini .targetY), ini.targetRadius, 0, Math.PI*2, false)   
            self.ctx.closePath();   
            self.ctx.lineWidth = 1;   
            self.ctx.stroke();   
            self.ctx.restore();   
        } jika(self.showShockwave){   
47.             self.ctx.save();   
48.             self.ctx.translate(Math.round(ini.x), Math.round(ini .y));   
49.             self.ctx.rotate(ini.shockwaveAngle);   
50.             self.ctx.beginPath();   
51.             self.ctx.arc(0, 0, 1*(ini.speed/5), 0, Math.PI,  benar);   
52.             self.ctx.strokeStyle = 'hsla(' ini.hue '> , 100%, ' ini.kecerahan '%, ' rand(25, 60)/100 ')';   
53.             self.ctx.lineWidth = ini.lineWidth;   
54.             self.ctx.stroke();   
55.             self.ctx.restore();   
56.         }                                    
57.     };  

　　这段JS代码是创建烟花实例的，我们也可以从draw方法中看出，当我仇為的，我们也可以从draw方法中看出，当我仇為炠时，烟花发射的目的地就在那个点上。

　　这款HTML5 Canvas烟花效果的核心代码就是这样，谢谢阅读，希望能帮到大家说家，我们会努力分享更多优秀的文章。