HTML5 Canvas Super Cool fireworks Bloom Animation Tutorial

This is a very cool HTML5 canvas animation, it will simulate the reality of our real life fireworks animation effects, the effect is very realistic, but after all, computer simulation, with a girlfriend to see it, the effect is still poor point, hehe. This HTML5 canvas animation is a bit better, is its performance, chrome basically no card feeling, even if you release a lot of fireworks are the same.

You can look at the online demo here

Here's a quick look at the process and code to implement this HTML5 fireworks, which consists primarily of HTML code, CSS code, and JavaScript code, and of course JavaScript code is the most important.

HTML code:





<div id= "GUI" ></div>


<div id= "Canvas-container" >


<div id= "mountains2″></div>


<div id= "mountains1″></div>


<div id= "Skyline" ></div>


</div>





HTML structure is very simple, that is, the construction of a canvas container, we will use JS in this container to generate a canvas object. Look at the final JS code you will know.


CSS Code:








#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;


}





Canvas {


Cursor:crosshair;


Display:block;


position:relative;


Z-index:3;


}





canvas:active {


Cursor:crosshair;


}





#skyline {


Background:url (skyline.png) repeat-x 50% 0;


bottom:0;


height:135px;


left:0;


Position:absolute;


width:100%;


z-index:1;


}





#mountains1 {


Background:url (mountains1.png) repeat-x 40% 0;


bottom:0;


height:200px;


left:0;


Position:absolute;


width:100%;


z-index:1;


}





#mountains2 {


Background:url (mountains2.png) repeat-x 30% 0;


bottom:0;


height:250px;


left:0;


Position:absolute;


width:100%;


z-index:1;


}





#gui {


right:0;


position:fixed;


top:0;


Z-index:3;


}











CSS code is nothing special, mainly define the background color and border and so on.





Next is the most important JavaScript code.


JavaScript code:








self.init = function () {


Self.dt = 0;


self.oldtime = Date.now ();


Self.canvas = document.createelement ("Canvas");


Self.canvascontainer = $ ("#canvas-container");





var canvascontainerdisabled = document.getElementById ("Canvas-container");


Self.canvas.onselectstart = function () {


return false;


        };





self.canvas.width = SELF.CW = 600;


self.canvas.height = self.ch = 400;





self.particles = [];


Self.partcount = 30;


self.fireworks = [];


self.mx = SELF.CW/2;


self.my = SELF.CH/2;


Self.currenthue = 170;


self.partspeed = 5;


self.partspeedvariance = 10;


self.partwind = 50;


self.partfriction = 5;


self.partgravity = 1;


self.huemin = 150;


Self.huemax = 200;


self.fworkspeed = 2;


self.fworkaccel = 4;


self.huevariance = 30;


Self.flickerdensity = 20;


Self.showshockwave = false;


Self.showtarget = true;


Self.clearalpha = 25;





self.canvasContainer.append (Self.canvas);


self.ctx = Self.canvas.getContext ("2d");


Self.ctx.lineCap = "Round";


Self.ctx.lineJoin = "Round";


self.linewidth = 1;


self.bindevents ();


Self.canvasloop ();





Self.canvas.onselectstart = function () {


return false;


        };





    };











This JS code is mainly to construct a canvas object in the canvas container, and initialize the appearance and animation properties of the canvas object.








var particle = function (x, y, hue) {


this.x = x;


this.y = y;


this.coordlast = [


{x:x, y:y},


{x:x, y:y},


{x:x, y:y}


        ];


this.angle = rand (0, 360);


this.speed = rand ((self.partspeed-self.partspeedvariance) <= 0)? 1:self.partspeed-self.partspeedv Ariance, (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;


    };





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) {


Self.particles.splice (index, 1);


        }           


    };





Particle.prototype.draw = function () {


var coordrand = (rand (1,3)-1);


Self.ctx.beginPath ();


Self.ctx.moveTo (Math.Round (this.coordlast[coordrand].x), Math.Round (THIS.COORDLAST[COORDRAND].Y));


Self.ctx.lineTo (Math.Round (this.x), Math.Round (THIS.Y));


Self.ctx.closePath ();


Self.ctx.strokeStyle = "Hsla" ("+this.hue+", 100%, "+this.brightness+"%, "+this.alpha+") ";


Self.ctx.stroke ();





if (self.flickerdensity > 0) {


var inversedensity = 50-self.flickerdensity;


if (rand (0, inversedensity) = = inversedensity) {


Self.ctx.beginPath ();


Self.ctx.arc (Math.Round (this.x), Math.Round (THIS.Y), rand (THIS.LINEWIDTH,THIS.LINEWIDTH+3)/2, 0, Mat H.pi*2, False)


Self.ctx.closePath ();


var randalpha = rand (50,100)/100;


Self.ctx.fillStyle = "Hsla" ("+this.hue+", 100%, "+this.brightness+"%, "+randalpha+") ";


Self.ctx.fill ();


            }   


        }


    };











This JS code function is to achieve fireworks explosion after the small particles, from the draw method can be seen, create a few random points, fireworks particles can be scattered in this range of random points.








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 = [


{x:startx, y:starty},


{x:startx, y:starty},


{x:startx, y:starty}


        ];


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;


};





Firework.prototype.update = function (index) {


self.ctx.lineWidth = this.linewidth;





VX = Math.Cos (this.angle) * This.speed,


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 + * SELF.DT;


} else {


This.targetradius = 1 * SELF.DT;


            }


}





if (this.startx >= this.targetx) {


if (this.x + VX <= this.targetx) {


this.x = This.targetx;


THIS.HITX = true;


} else {


this.x = VX * SELF.DT;


            }


} else {


if (this.x + VX >= this.targetx) {


this.x = This.targetx;


THIS.HITX = true;


} else {


this.x = VX * SELF.DT;


            }


        }





if (this.starty >= this.targety) {


if (this.y + vy <= this.targety) {


This.y = this.targety;


this.hity = true;


} else {


This.y + + vy * SELF.DT;


            }


} else {


if (this.y + vy >= this.targety) {


this.y = this.targety;


this.hity = true;


else {


This.y + + vy * SELF.DT;


            }


        }               





if (this.hitx && this.hity) {


var randexplosion = rand (0, 9);


self.createparticles (This.targetx, this.targety, This.hue);


Self.fireworks.splice (index, 1);


        }


    };





Firework.prototype.draw = function () {


self.ctx.lineWidth = this.linewidth;





var coordrand = (rand (1,3)-1);


Self.ctx.beginPath ();


Self.ctx.moveTo (Math.Round (this.coordlast[coordrand].x), Math.Round (THIS.COORDLAST[COORDRAND].Y));


Self.ctx.lineTo (Math.Round (this.x), Math.Round (THIS.Y));


Self.ctx.closePath ();


Self.ctx.strokeStyle = "Hsla" ("+this.hue+", 100%, "+this.brightness+"%, "+this.alpha+") ";


Self.ctx.stroke ();





if (self.showtarget) {


Self.ctx.save ();


Self.ctx.beginPath ();


Self.ctx.arc (Math.Round (THIS.TARGETX), Math.Round (this.targety), This.targetradius, 0, math.pi*2, false)


Self.ctx.closePath ();


self.ctx.lineWidth = 1;


Self.ctx.stroke ();


Self.ctx.restore ();


        }





if (self.showshockwave) {


Self.ctx.save ();


self.ctx.translate (Math.Round (this.x), Math.Round (THIS.Y));


Self.ctx.rotate (This.shockwaveangle);


Self.ctx.beginPath ();


Self.ctx.arc (0, 0, 1* (THIS.SPEED/5), 0, Math.PI, true);


Self.ctx.strokeStyle = "Hsla" ("+this.hue+", 100%, "+this.brightness+"%, "+rand" (25, 60)/100+ ")";


self.ctx.lineWidth = this.linewidth;


Self.ctx.stroke ();


Self.ctx.restore ();


}                                


    };











This JS code is to create a fireworks instance, we can also see from the draw method, when we click on the canvas in the mouse point, the fireworks launch destination is at that point.

This HTML5 canvas fireworks effect of the core code is this, all the code also asked you to download source code research. Source code Download >>