用HTML5制作烟火效果的教

1、用html5制作烟火效果的教原理很容易。就写一个烟火类以及碎屑类，实例化后让它飞起来，然后到达某个点后，把这个烟火对象的dead属性置为true，然后再实例化出一定数量的碎屑对象，并且给与碎屑对象随机一个要到达的目标点，然后让全部碎屑对象飞过去就行了。【烟火】xml/html code复制内容到剪贴板varboom=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.boomar

2、ea=?boomarea;this.theta=0;this.dead=false;this.ba=parseint(getrandom(80?,?200);btotype=?_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?-?thi

3、s.y;thisthis.x=?this.x+dx*0.01;thisthis.y=?this.y+dy*0.01;if(math.abs(dx)=51?:?2;var?color;if(style=1)color=?a:parseint(getrandom(128,255),b:parseint(getrandom(128,255),c:parseint(getrandom(128,255)varfanwei=parseint(getrandom(300,?400);for(vari=0;iif(style=2)color=?a:parseint(getrandom(128,255),b:p

4、arseint(getrandom(128,255),c:parseint(getrandom(128,255)vara=getrandom(-math.pi,?math.pi);varx=getrandom(0,?fanwei)?*?math.cos(a)?+?this.x;vary=getrandom(0,?fanwei)?*?math.sin(a)?+?this.y;varradius=getrandom(0?,?2)varfrag=newfrag(this.x?,?this.y?,?radius?,?color?,?x?,?y?);this.booms.push(frag);,_sha

5、pboom:function()/有外形的爆炸varthat=this;putvalue(ocas?,?octx?,?this.shape?,?5,?function(dots)vardx=canvas.width/2-that.x;vardy=canvas.height/2-that.y;for(vari=0;icolor=?a:dotsi.a,b:dotsi.b,c:dotsi.cvarx=dotsi.x;vary=dotsi.y;varradius=1;varfrag=newfrag(that.x?,?that.y?,?radius?,?color?,?x-dx?,?y-dy);that

6、.booms.push(frag);)【碎屑】xml/html code复制内容到剪贴板varfrag=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;ftotype=?paint:function()ctx

7、.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

8、dx=this.tx?-?this.x?,dy=this.ty?-?this.y;this.x=math.abs(dx)<0.1this.tx?:?(this.x+dx*0.1);this.y=math.abs(dy)<0.1this.ty?:?(this.y+dy*0.1);if(dx=0?&amp;&amp;?math.abs(dy)<=80)this.dead=true;this.paint();让碎屑产生虚影也很容易，就是每次刷新画布时，不是擦掉重绘，而是绘制透亮度为0.1(假如想虚影更长，可以把这个值弄的更小)的背景色彩。然后虚影就可以做出来了。也就

9、是：xml/html code复制内容到剪贴板ctx.save();ctx.fillstyle=&quot;rgba(0,5,24,0.1)&quot;ctx.fillrect(0,0,canvas.width,canvas.height);ctx.restore();让烟火形成自己想要的外形，比如字体，之类的，也很容易，就是可以通过离屏canvas以及canvas的getimagedata这个办法就可以做出来。离屏canvas，顾名思义就是离开屏幕的，也就是不行见的canvas，挺直在js里面用document.createelement(&quot;canvas&quot;)就可以生成一个canvas dom对象了，只要不把这个dom对象赋给body，这个canvas对象就相当于一个离屏对象了，我们就可以猎取到这个离屏canvas的context对象，然后再用户看不到的地方做任何我们想做的事情了。让烟火形成自己想要的外形就是先把文字或者画在离屏canv