Tutorial on creating fireworks effects with HTML5_html5 tutorial skills-H5 Tutorial-php.cn

Tutorial on creating fireworks effects with HTML5_html5 tutorial skills

WBOY

Release： 2016-05-16 15:46:46

Original

1941 people have browsed it

It’s the Chinese New Year, and all I can think of during the Chinese New Year is setting off fireworks. . . . So I used canvas to write a fireworks effect. Clicking the mouse will also produce fireworks, but don't produce too many fireworks. The particles emitted by a fireworks are between 30 and 200. When the number of particles on the page reaches a certain Sometimes, the page will be very stuck, and I didn’t deliberately optimize Shenma. Let’s talk about it later when we have time.

Go directly to the DEMO: Set off fireworks

The principle is very simple. . . Just write a firework class and a debris class, instantiate it and let it fly. Then when it reaches a certain point, set the dead attribute of the fireworks object to true, then instantiate a certain number of debris objects, and give Just randomly create a target point for the debris objects to reach, and then let all the debris objects fly there.

【Fireworks】

XML/HTML CodeCopy content to clipboard

var Boom = function(x,r,c,boomArea,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(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)<=this.ba && Math.abs(dy)<=this.ba){
if(this.shape){
this._shapBoom();
}
else this._boom();
this.dead = true;
}
else {
this._paint();
}
},
_drawLight:function(){
ctx.save();
ctx.fillStyle = "rgba(255,228,150,0.3)";
ctx.beginPath();
ctx.arc(this.x , this.y , this.r 3*Math.random() 1 , 0 , 2*Math.PI);
ctx.fill();
ctx.restore();
},
_boom:function(){ //普通爆炸
var fragNum = getRandom(30 , 200);
var style = getRandom(0,10)>=5? 1 : 2;
var color;
if(style===1){
color = {
a:parseInt(getRandom(128,255)),
b:parseInt(getRandom(128,255)),
c:parseInt(getRandom(128,255))
}
}
var fanwei = parseInt(getRandom(300, 400));
for(var i=0;i<fragNum;i ){
if(style===2){
color = {
a:parseInt(getRandom(128,255)),
b:parseInt(getRandom(128,255)),
c:parseInt(getRandom(128,255))
}
}
var a = getRandom(-Math.PI, Math.PI);
var x = getRandom(0, fanwei) * Math.cos(a) this.x;
var y = getRandom(0, fanwei) * Math.sin(a) this.y;
var radius = getRandom(0 , 2)
var frag = new Frag(this.x , this.y , radius , color , x , y );
this.booms.push(frag);
}
},
_shapBoom:function(){ //有形状的爆炸
var that = this;
putValue(ocas , octx , this.shape , 5, function(dots){
var dx = canvas.width/2-that.x;
var dy = canvas.height/2-that.y;
for(var i=0;i<dots.length;i ){
color = {a:dots[i].a,b:dots[i].b,c:dots[i].c}
var x = dots[i].x;
var y = dots[i].y;
var radius = 1;
var frag = new Frag(that.x , that.y , radius , color , x-dx , y-dy);
that.booms.push(frag);
}
})
}
}

　　【碎屑】

XML/HTML Code复制内容到剪贴板

var Frag = function(centerX , centerY , radius , color ,tx , ty){ //烟火碎屑对象
this.tx = tx;
this.ty = ty;
this.x = centerX;
this.y = centerY;
this.dead = false;
this.centerX = centerX;
this.centerY = centerY;
this.radius = radius;
this.color = color;
}
Frag.prototype = {
paint:function(){
ctx.save();
ctx.beginPath();
ctx.arc(this.x , this.y , this.radius , 0 , 2*Math.PI);
ctx.fillStyle = "rgba(" this.color.a "," this.color.b "," this.color.c ",1)";
ctx.fill()
ctx.restore();
},
moveTo:function(index){
thisthis.ty = this.ty 0.3;
var dx = this.tx - this.x , dy = this.ty - this.y;
this.x = Math.abs(dx)<0.1 ? this.tx : (this.x dx*0.1);
this.y = Math.abs(dy)<0.1 ? this.ty : (this.y dy*0.1);
if(dx===0 && Math.abs(dy)<=80){
this.dead = true;
}
this.paint();
}
}

　　让碎屑产生虚影也很简单，就是每次刷新画布时，不是擦掉重绘，而是绘制透明度为0.1（如果想虚影更长，可以把这个值弄的更小）的背景颜色。然后虚影就可以做出来了。也就是：

XML/HTML Code复制内容到剪贴板

ctx.save();
ctx.fillStyle = "rgba(0,5,24,0.1)";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.restore();

Let the fireworks form the shape you want, such as fonts, pictures, etc. It is also very simple. You can do it through the off-screen canvas and the getImageData method of the canvas. Off-screen canvas, as the name suggests, is an invisible canvas. You can use document.createElement("canvas") directly in js to generate a canvas dom object. As long as the dom object is not assigned to the body, this The canvas object is equivalent to an off-screen object. We can obtain the context object of this off-screen canvas, and then do whatever we want to do where the user cannot see it.

To make the fireworks form the shape you want, you first draw the text or picture on the off-screen canvas, then use getImageData to get the pixel array on the canvas, and then traverse the array to get the colored pixels, which is what we want. After the content is saved, it is displayed in the main canvas object.

I have talked about the pixel processing of getImageData in my previous blog. If you don’t know how to use it, please click here: Let’s talk about using canvas to achieve particleization of text and pictures

Source code address: https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Funny-demo/shotFire