How to use HTML5 to make fireworks effect

This article mainly introduces "how to use HTML5 to make fireworks effect". In daily operation, I believe many people have doubts about how to use HTML5 to make fireworks effect. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use HTML5 to make fireworks effect". Next, please follow the editor to study!

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

[fireworks]

XML/HTML Code copies content to the clipboard

VarBoom=function {/ / pyrotechnic object (x _ rer _ cmeno _ boomia _ shape)

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)

}

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

Vardx=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))