这是一个很酷的html5 canvas动画，它将模拟的是我们现实生活中烟花绽放的动画特效，效果非常逼真，但是毕竟是电脑模拟，带女朋友看就算了，效果还是差了点，呵呵。这个html5 canvas动画有一点比较出色，就是其性能，chrome上基本没有卡的感觉，就算你放出很多烟花也一样。
下面我们来简单分析一下实现这款html5烟花特效的过程及代码，主要由html代码、css代码以及javascript代码组成，当然javascript代码是最重要的。
html代码：
xml/html code
复制内容到剪贴板
<divid=”gui”></div><divid=”canvas-container”><divid=”mountains2′></div> <divid=”mountains1′></div><divid=”skyline”></div></div> html的结构非常简单，即构造了一个canvas容器，我们会利用js在这个容器中生成一个canvas对象。看最后的js代码你就会知道了。
css代码：
css code
复制内容到剪贴板
#canvas-container{background:#000url(bg.jpg);height:400px;left:50%;margin:–200px00–300px;position:absolute;top:50%;width:600px;z-index:2; }canvas{cursor:crossha工会会徽图案ir;display:block;position:relative;z-index:3; }canvas:active{cursor:crosshair; }#skyline{background:url(skyline.png)repeat-x50%0;bottombottom:0;height:135px;left:0;position:absolute;width:100%;z-index:1; }#mountains1{background:url(mountains1.png)repeat-x40%0;bottombottom:0;height:200px;left:0;position:absolute;width:100%;z-index:1; }#mountains2{background:url(mountains2.png)repeat-x30%0;bottombottom:0;height:250px;left:0;position:absolute;width:100%;z-index:1; }#gui{rightright:0;position:fixed;top:0;z-index:3; } css代码没什么特别，主要也就定义一下背景色和边框之类的。
接下来是最重要的javascript代码。
javascript代码：
javascript code
复制内容到剪贴板
lf.init=function(){ lf.dt=0; lf.oldtime=date.now(); lf.canvas=document.createelement(‘canvas’); lf.canvascontainer=$(‘#canvas-container’);varcanvascontainerdisabled=document.getelementbyid(‘canvas-container’); lf.canvas.onlectstart=function(){returnfal; }; lf.canvas.width=lf.cw=600; lf.canvas.height=lf.ch=400; lf.particles=[]; lf.partcount=30; lf.fireworks=[]; lf.mx=lf.cw/2; lf.my=lf.ch/2; lf.currenthue=170; lf.partspeed=5; lf.partspeedvariance=10; lf.partwind=50; lf.partfriction=5; lf.partgravity=1; lf.huemin=150; lf.huemax=200; lf.fworkspeed=2; lf.fworkaccel=4; lf.huevariance=30; lf.flickerdensity=20; lf.showshockwave=fal; lf.showtarget=true; lf.clearalpha=25; lf.canvascontainer.append(lf.canvas); lf.ctx=lf.canvas.getcontext(‘2d’); lf.ctx.linecap=’round’; lf.ctx.linejoin=’round’; lf.linewidth=1; lf.bindevents(); lf.canvasloop(); lf.canvas.onlectstart=function(){returnfal; }; }; 这段js代码主要是往canvas容器中构造一个canvas对象，并且对这个canvas对象的外观以及动画属性作了初始化。
javascript code
复制内容到剪贴板
varparticle=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(((lf.partspeed–lf.partspeedvariance)<=0)?1:lf.partspeed–lf.partspeedvariance,(lf.partspeed+lf.partspeedvariance));this.friction=1–lf.partfriction/100;this.gravity=lf.partgravity/2;this.hue=rand(hue-lf.huevariance,hue+lf.huevariance);this.brightness=rand(50,80);this.alpha=rand(40,100)/100;this.decay=rand(10,50)/1000;this.wind=(rand(0,lf.partwind)–(lf.partwind/2))/25;this.linewidth=lf.linewidth; }; particle.prototype.update=function(index){varradians=this.angle*math.pi/180;varvx=math.cos(radians)*this.speed;varvy=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*lf.dt;this.y+=vy*lf.dt;this.angle+=this.wind;this.alpha-=this.decay;if(!hittest(0,0,lf.cw,lf.ch,this.x-this.radius,this.y-this.radius,this.radius*2,this.radius*2)||this.alpha<.05){ lf.particles.splice(index,1); } }; particle.prototype.draw=function(){varcoordrand=(rand(1,3)-1); lf.ctx.beginpath(); lf.ctx.moveto(math.round(this.coordlast[coordrand].x),math.round(this.coordlast[coordrand].y)); lf.ctx.lineto(math.round(this.x),math.round(this.y)); lf.ctx.clopath(); lf.ctx.strokestyle=‘hsla(‘+this.hue+‘,100%,‘+this.brightness+‘%,‘+this.alpha+‘)’; lf.ctx.stroke();if(lf.flickerdensity>0){varinverdensity=50–lf.flickerdensity;if(rand(0,inverdensity)===inverdensity){ lf.ctx.beginpath(); lf.ctx.arc(math.r接电话礼仪ound(this.x),math.round(this.y),rand(this.linewidth,this.linewidth+3)/2,0,math.pi*2,fal)lf.ctx.clopath();varrandalpha=rand(50,100)/100; lf.ctx.fillstyle=‘hsla(‘+this.hue+‘,100%,‘+this.brightness+‘%,‘+randalpha+‘)’; lf.ctx.fill(); } } }; 这段js代码的功能是实现烟花爆炸后的小颗粒的绘制，从draw方法中可以看出，创建几个随机点，烟花颗粒即可在这个范围的随机点中散落。
javascript code
复制内容到剪贴板
varfirework=function(startx,starty,targetx,targety){this.x=startx;this.y=starty;this.startx=startx;this.starty=starty;this.hitx=fal;this.hity=fal;this.coordlast=[ {x:startx,y:starty}, {x:startx,y:starty}, {x:startx,y:starty} ];this.targetx=targetx;this.targety=targety;this.speed=lf.fworkspeed;this.angle=math.atan2(targety–starty,targetx–startx);this.shockwaveangle=math.atan2(targety–starty,targetx–startx)+(90*(math.pi/180));this.acceleration=lf.fworkaccel/100;this.hue=lf.currenthue;this.brightness=rand(50,80);this.alpha=rand(50,100)/100;this.linewidth=lf.linewidth;this.targetradius=1; }; firework.prototype.update=function(index){ lf.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(lf.showtarget){if(this.targetradius<8){this.targetradius+=.25*lf.dt; }el{this.targetradius=1*lf.dt; } }if(this.startx>=this.targetx){if(this.x+vx<=this.targetx){this.x=this.targetx;this.hitx=true; }el{this.x+=vx*lf.dt; } }el{if(this.x+vx>=this.targetx){this.x=this.targetx;this.hitx=true; }el{this.x+=vx*lf.dt; } }if(this.starty>=this.targety){if(this.y+vy<=this.targety){this.y=this.targety;this.hity=true; }el{this.y+=vy*lf.dt; } }el{if(this.y+vy>=this.targety){this.y=this.targety;this.hity=true; }el{this.y+=vy*lf.dt; } }if(this.hitx&&this.hity){varrandexplosion=rand(0,9); lf.createparticles(this.targetx,this.targety,this.hue); lf.fireworks.splice(index,1); } }; firework.prototype.draw=function(){ lf.ctx.linewidth=this.linewidth;varcoordrand=(rand(1,3)-1); lf.ctx.beginpath(); lf.ctx.moveto(math.round(this.coordlast[coordrand].x),math.round(this.coordlast[coordrand].y)); lf.ctx.lineto(math.round(this.x),math.round(this.y)); lf.ctx.clopath(); lf.ctx.strokestyle=‘hsla(‘+this.hue+‘,100%,‘+this.brightness+‘%,‘+this.alpha+‘)’; lf.ctx.stroke();if(lf.showtarget){ lf.ctx.save(); lf.ctx.beginpath(); lf.ctx.arc(math.round(this.targetx),math.round(this.targety),this.targetradius,0,math.pi*2,fal) lf.ctx.clopath(); lf.ctx.linewidth=1; lf.ctx.stroke(); lf.ctx.restore(); }if(lf.showshockwave){ lf.ctx.save(); lf.ctx.translate(math.round(this.x),math.round(this.y)); lf.ctx.rotate(this.shockwaveangle); lf.ctx.beginpath(); lf.ctx.arc(0,0,1*(this.speed/5),0,math.pi,true); lf.ctx.strokestyle=‘hsla(‘+this.hue+‘,100%,‘+this.brightness+‘%,‘+rand(25,60)/100+‘)’; lf.ctx.linewidth=this.linewidth; lf.ctx.stroke(); lf.ctx.情侣黄钻restore(); 招生宣传方案
} }; 这段js代码是创建烟花实例的，我们也可以从draw方法中看出，当我们鼠标点击画布中的某点时，烟花发射的目的地就在那个点上。
这款html5 canvas烟花效果的核心代码就是这样，谢谢阅读，希望能帮到大家，请继续关注www.887551.com，我们会努力分享更多优秀的文章。
