Example tutorial HTML5 Canvas super cool fireworks bloom animation implementation code_html5 tutorial skills

This is a cool HTML5 Canvas animation. It will simulate the animated special effects of fireworks blooming in our real life. The effect is very realistic, but after all, it is a computer simulation. Even if you take your girlfriend to watch it, the effect is still a bit poor. ,hehe. One thing that is outstanding about this HTML5 Canvas animation is its performance. There is basically no lag on Chrome, even if you set off a lot of fireworks.

Let’s briefly analyze the process and code to implement this HTML5 firework special effect. It is mainly composed of HTML code, CSS code and Javascript code. Of course, the javascript code is the most important.

　HTML code:

XML/HTML CodeCopy content to clipboard

1. <div id=”gui”>div>
2. <div id=”canvas-container”> <div id=”mountains2″>div> 
3. <div id=”mountains1″ >div><div id=”skyline”>div> div>

The structure of HTML is very simple, that is, a canvas container is constructed, and we will use JS to generate a Canvas object in this container. You will know it by looking at the final JS code.

　CSS code:

CSS CodeCopy content to clipboard

1. #canvas-container { background: #000 url(bg.jpg); height: 400px; left: 50%; margin: -200px 0 0 -300px; position: absolute; top: 50%; width: 600px; z-index: 2;   
2. } canvas { cursor: crosshair; display: block; position: relative; z-index: 3;   
3. } canvas:active { cursor: crosshair;   
4. } #skyline { background: url(skyline.png) repeat-x 50% 0; bottombottom: 0; height: 135px; left: 0; position: absolute; width: 100%; z-index: 1;       
5. } #mountains1 { background: url(mountains1.png) repeat-x 40% 0; bottombottom: 0; height: 200px; left: 0; position: absolute; width: 100%; z-index: 1;       
6. } #mountains2 { background: url(mountains2.png) repeat-x 30% 0; bottombottom: 0; height: 250px; left: 0; position: absolute; width: 100%; z-index: 1;       
7. } #gui { rightright: 0; position: fixed; top: 0; z-index: 3;   
8. }  

The CSS code is nothing special, it mainly defines the background color and border.

Next is the most important Javascript code.

　Javascript code:

JavaScript CodeCopy content to clipboard

1. self.init = function(){       
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 = function() { return false;   
7.         };   
8.   
9.         self.canvas.width = self.cw = 600;   
10.         self.canvas.height = self.ch = 400;       
11.   
12.         self.particles = [];       
13.         self.partCount = 30;   
14.         self.fireworks = [];       
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 = false;   
30.         self.showTarget = true;   
31.         self.clearAlpha = 25;   
32.   
33.         self.canvasContainer.append(self.canvas);   
34.         self.ctx = self.canvas.getContext('2d');   
35.         self.ctx.lineCap = 'round';   
36.         self.ctx.lineJoin = 'round';   
37.         self.lineWidth = 1;   
38.         self.bindEvents();               
39.         self.canvasLoop();   
40.   
41.         self.canvas.onselectstart = function() { return false;   
42.         };   
43.   
44.     };  

This JS code mainly constructs a Canvas object in the canvas container, and initializes the appearance and animation properties of the canvas object.

JavaScript CodeCopy content to clipboard

1. var Particle = function(x, y, hue){ this.x = x; this.y = y; this.coordLast = [   
2.             {x: x, y: y},   
3.             {x: x, y: y},   
4.             {x: x, y: y}   
5.         ]; this.angle = rand(0, 360); this.speed = rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed   self.partSpeedVariance)); this.friction = 1 - self.partFriction/100; this.gravity = self.partGravity/2; this.hue = rand(hue-self.hueVariance, hue self.hueVariance); this.brightness = rand(50, 80); this.alpha = rand(40,100)/100; this.decay = rand(10, 50)/1000; this.wind = (rand(0, self.partWind) - (self.partWind/2))/25; this.lineWidth = self.lineWidth;   
6.     };   
7.   
8.     Particle.prototype.update = function(index){ var radians = this.angle * Math.PI / 180; var vx = Math.cos(radians) * this.speed; var vy = Math.sin(radians) * this.speed   this.gravity; this.speed *= this.friction; this.coordLast[2].x = this.coordLast[1].x; this.coordLast[2].y = this.coordLast[1].y; this.coordLast[1].x = this.coordLast[0].x; this.coordLast[1].y = this.coordLast[0].y; this.coordLast[0].x = this.x; this.coordLast[0].y = this.y; this.x  = vx * self.dt; this.y  = vy * self.dt; this.angle  = this.wind; this.alpha -= this.decay; if(!hitTest(0,0,self.cw,self.ch,this.x-this.radius, this.y-this.radius, this.radius*2, this.radius*2) || this.alpha < .05){                       
9.             self.particles.splice(index, 1);       
10.         }               
11.     };   
12.   
13.     Particle.prototype.draw = function(){ var coordRand = (rand(1,3)-1);   
14.         self.ctx.beginPath();                                   
15.         self.ctx.moveTo(Math.round(this.coordLast[coordRand].x), Math.round(this.coordLast[coordRand].y));   
16.         self.ctx.lineTo(Math.round(this.x), Math.round(this.y));   
17.         self.ctx.closePath();                   
18.         self.ctx.strokeStyle = 'hsla(' this.hue ', 100%, ' this.brightness '%, ' this.alpha ')';   
19.         self.ctx.stroke(); if(self.flickerDensity > 0){ var inverseDensity = 50 - self.flickerDensity; if(rand(0, inverseDensity) === inverseDensity){   
20.                 self.ctx.beginPath();   
21.                 self.ctx.arc(Math.round(this.x), Math.round(this.y), rand(this.lineWidth,this.lineWidth 3)/2, 0, Math.PI*2, false)  self.ctx.closePath(); var randAlpha = rand(50,100)/100;   
22.                 self.ctx.fillStyle = 'hsla(' this.hue ', 100%, ' this.brightness '%, ' randAlpha ')';   
23.                 self.ctx.fill();   
24.             }       
25.         }   
26.     };  

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

JavaScript Code复制内容到剪贴板

1. var Firework = function(startX, startY, targetX, targetY){ this.x = startX; this.y = startY; this.startX = startX; this.startY = startY; this.hitX = false; this.hitY = false; this.coordLast = [   
2.             {x: startX, y: startY},   
3.             {x: startX, y: startY},   
4.             {x: startX, y: startY}   
5.         ]; this.targetX = targetX; this.targetY = targetY; this.speed = self.fworkSpeed; this.angle = Math.atan2(targetY - startY, targetX - startX); this.shockwaveAngle = Math.atan2(targetY - startY, targetX - startX) (90*(Math.PI/180)); this.acceleration = self.fworkAccel/100; this.hue = self.currentHue; this.brightness = rand(50, 80); this.alpha = rand(50,100)/100; this.lineWidth = self.lineWidth; this.targetRadius = 1;   
6.     };   
7.   
8.     Firework.prototype.update = function(index){   
9.         self.ctx.lineWidth = this.lineWidth;   
10.   
11.         vx = Math.cos(this.angle) * this.speed,   
12.         vy = Math.sin(this.angle) * this.speed; this.speed *= 1   this.acceleration; this.coordLast[2].x = this.coordLast[1].x; this.coordLast[2].y = this.coordLast[1].y; this.coordLast[1].x = this.coordLast[0].x; this.coordLast[1].y = this.coordLast[0].y; this.coordLast[0].x = this.x; this.coordLast[0].y = this.y; if(self.showTarget){ if(this.targetRadius < 8){ this.targetRadius  = .25 * self.dt;   
13.             } else { this.targetRadius = 1 * self.dt;       
14.             }   
15.         } if(this.startX >= this.targetX){ if(this.x   vx <= this.targetX){ this.x = this.targetX; this.hitX = true;   
16.             } else { this.x  = vx * self.dt;   
17.             }   
18.         } else { if(this.x   vx >= this.targetX){ this.x = this.targetX; this.hitX = true;   
19.             } else { this.x  = vx * self.dt;   
20.             }   
21.         } if(this.startY >= this.targetY){ if(this.y   vy <= this.targetY){ this.y = this.targetY; this.hitY = true;   
22.             } else { this.y  = vy * self.dt;   
23.             }   
24.         } else { if(this.y   vy >= this.targetY){ this.y = this.targetY; this.hitY = true;   
25.             } else { this.y  = vy * self.dt;   
26.             }   
27.         } if(this.hitX && this.hitY){ var randExplosion = rand(0, 9);   
28.             self.createParticles(this.targetX, this.targetY, this.hue);   
29.             self.fireworks.splice(index, 1);                       
30.         }   
31.     };   
32.   
33.     Firework.prototype.draw = function(){   
34.         self.ctx.lineWidth = this.lineWidth; var coordRand = (rand(1,3)-1);                       
35.         self.ctx.beginPath();                               
36.         self.ctx.moveTo(Math.round(this.coordLast[coordRand].x), Math.round(this.coordLast[coordRand].y));   
37.         self.ctx.lineTo(Math.round(this.x), Math.round(this.y));   
38.         self.ctx.closePath();   
39.         self.ctx.strokeStyle = 'hsla(' this.hue ', 100%, ' this.brightness '%, ' this.alpha ')';   
40.         self.ctx.stroke(); if(self.showTarget){   
41.             self.ctx.save();   
42.             self.ctx.beginPath();   
43.             self.ctx.arc(Math.round(this.targetX), Math.round(this.targetY), this.targetRadius, 0, Math.PI*2, false)   
44.             self.ctx.closePath();   
45.             self.ctx.lineWidth = 1;   
46.             self.ctx.stroke();   
47.             self.ctx.restore();   
48.         } if(self.showShockwave){   
49.             self.ctx.save();   
50.             self.ctx.translate(Math.round(this.x), Math.round(this.y));   
51.             self.ctx.rotate(this.shockwaveAngle);   
52.             self.ctx.beginPath();   
53.             self.ctx.arc(0, 0, 1*(this.speed/5), 0, Math.PI, true);   
54.             self.ctx.strokeStyle = 'hsla(' this.hue ', 100%, ' this.brightness '%, ' rand(25, 60)/100 ')';   
55.             self.ctx.lineWidth = this.lineWidth;   
56.             self.ctx.stroke();   
57.             self.ctx.restore();   
58.         }                                    
59.     };  

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

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