A tutorial on how to use HTML5 code to create fireworks effects

Xiaobian to share with you how to use HTML5 code to make fireworks effect tutorial, I believe most people still do not know how, so share this article for your reference, I hope you read this article after a lot of harvest, let us go to understand it!

The principle is simple... Just write a pyrotechnic class and a debris class, instantiate it and let it fly, then set the dead attribute of the pyrotechnic object to true after reaching a certain point, then instantiate a certain number of debris objects, and give the debris object a random target point to reach, and then let all debris objects fly past it.

[Fireworks]

XML/HTML Code Copy content to clipboard

var Boom = function(x,r,c,boomArea,shape){ //pyrotechnic object

this.booms = [];

this.x = x;

this.y = (canvas.height+r);

this.r = r;

this.c = c;

this.shape = shape || false;

this.boomArea = boomArea;

this.theta = 0;

this.dead = false;

this.ba = parseInt(getRandom(80 , 200));

}

Boom.prototype = {

_paint:function(){

ctx.save();

ctx.beginPath();

ctx.arc(this.x,this.y,this.r,0,2*Math.PI);

ctx.fillStyle = this.c;

ctx.fill();

ctx.restore();

},

_move:function(){

var dx = this.boomArea.x - this.x , dy = this.boomArea.y - this.y;

thisthis.x = this.x+dx*0.01;

thisthis.y = this.y+dy*0.01;

if(Math.abs(dx)