实例好代码教程 HTML5 Canvas 超炫酷烟花绽放动画如何实现代码

互联网
这是初夏，陽光灿烂，海水湛蓝，海鸥轻巧地向船桅间滑过，生命是多彩的，充满了青春的欢乐。

　　这是一个很酷的HTML5 Canvas动画，它将模拟的是我们现实生活中烟花绽放的动画特效，效果非常逼真，但是毕竟是电脑模拟，带女朋友看就算了，效果还是差了点，呵呵。这个HTML5 Canvas动画有一点比较出色，就是其性能，Chrome上基本没有卡的感觉，就算你放出很多烟花也一样。

　　下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，主要由HTML代码、CSS代码以及Javascript代码组成，当然javascript代码是最重要的。

　　HTML代码：

XML/HTML Code复制内容到剪贴板
  1. <divid=”gui”></div>
  2. <divid=”canvas-container”><divid=”mountains2″></div>
  3. <divid=”mountains1″></div><divid=”skyline”></div></div>

　　HTML的结构非常简单，即构造了一个canvas容器，我们会利用JS在这个容器中生成一个Canvas对象。看最后的JS代码你就会知道了。

　　CSS代码：

CSS Code复制内容到剪贴板
  1. #canvas-container{background:#000url(bg.jpg);height:400px;left:50%;margin:-200px00-300px;position:absolute;top:50%;width:600px;z-index:2;
  2. }canvas{cursor:crosshair;display:block;position:relative;z-index:3;
  3. }canvas:active{cursor:crosshair;
  4. }#skyline{background:url(skyline.png)repeat-x50%0;bottombottom:0;height:135px;left:0;position:absolute;width:100%;z-index:1;
  5. }#mountains1{background:url(mountains1.png)repeat-x40%0;bottombottom:0;height:200px;left:0;position:absolute;width:100%;z-index:1;
  6. }#mountains2{background:url(mountains2.png)repeat-x30%0;bottombottom:0;height:250px;left:0;position:absolute;width:100%;z-index:1;
  7. }#gui{rightright:0;position:fixed;top:0;z-index:3;
  8. }

　　CSS代码没什么特别，主要也就定义一下背景色和边框之类的。

　　接下来是最重要的Javascript代码。

　　Javascript代码：

JavaScript Code复制内容到剪贴板
  1. self.init=function(){
  2. self.dt=0;
  3. self.oldTime=Date.now();
  4. self.canvas=document.createElement('canvas');
  5. self.canvasContainer=$('#canvas-container');varcanvasContainerDisabled=document.getElementById('canvas-container');
  6. self.canvas.onselectstart=function(){returnfalse;
  7. };
  9. self.canvas.width=self.cw=600;
  10. self.canvas.height=self.ch=400;
  12. self.particles=[];
  13. self.partCount=30;
  14. self.fireworks=[];
  15. self.mx=self.cw/2;
  16. self.my=self.ch/2;
  17. self.currentHue=170;
  18. self.partSpeed=5;
  19. self.partSpeedVariance=10;
  20. self.partWind=50;
  21. self.partFriction=5;
  22. self.partGravity=1;
  23. self.hueMin=150;
  24. self.hueMax=200;
  25. self.fworkSpeed=2;
  26. self.fworkAccel=4;
  27. self.hueVariance=30;
  28. self.flickerDensity=20;
  29. self.showShockwave=false;
  30. self.showTarget=true;
  31. self.clearAlpha=25;
  33. self.canvasContainer.append(self.canvas);
  34. self.ctx=self.canvas.getContext('2d');
  35. self.ctx.lineCap='round';
  36. self.ctx.lineJoin='round';
  37. self.lineWidth=1;
  38. self.bindEvents();
  39. self.canvasLoop();
  41. self.canvas.onselectstart=function(){returnfalse;
  42. };
  44. };

　　这段JS代码主要是往canvas容器中构造一个Canvas对象，并且对这个canvas对象的外观以及动画属性作了初始化。

JavaScript Code复制内容到剪贴板
  1. varParticle=function(x,y,hue){this.x=x;this.y=y;this.coordLast=[
  2. {x:x,y:y},
  3. {x:x,y:y},
  4. {x:x,y:y}
  5. ];this.angle=rand(0,360);this.speed=rand(((self.partSpeed-self.partSpeedVariance)<=0)?1:self.partSpeed-self.partSpeedVariance,(self.partSpeed+self.partSpeedVariance));this.friction=1-self.partFriction/100;this.gravity=self.partGravity/2;this.hue=rand(hue-self.hueVariance,hue+self.hueVariance);this.brightness=rand(50,80);this.alpha=rand(40,100)/100;this.decay=rand(10,50)/1000;this.wind=(rand(0,self.partWind)-(self.partWind/2))/25;this.lineWidth=self.lineWidth;
  6. };
  8. 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*self.dt;this.y+=vy*self.dt;this.angle+=this.wind;this.alpha-=this.decay;if(!hitTest(0,0,self.cw,self.ch,this.x-this.radius,this.y-this.radius,this.radius*2,this.radius*2)||this.alpha<.05){
  9. self.particles.splice(index,1);
  10. }
  11. };
  13. Particle.prototype.draw=function(){varcoordRand=(rand(1,3)-1);
  14. self.ctx.beginPath();
  15. self.ctx.moveTo(Math.round(this.coordLast[coordRand].x),Math.round(this.coordLast[coordRand].y));
  16. self.ctx.lineTo(Math.round(this.x),Math.round(this.y));
  17. self.ctx.closePath();
  18. self.ctx.strokeStyle='hsla('+this.hue+',100%,'+this.brightness+'%,'+this.alpha+')';
  19. self.ctx.stroke();if(self.flickerDensity>0){varinverseDensity=50-self.flickerDensity;if(rand(0,inverseDensity)===inverseDensity){
  20. self.ctx.beginPath();
  21. self.ctx.arc(Math.round(this.x),Math.round(this.y),rand(this.lineWidth,this.lineWidth+3)/2,0,Math.PI*2,false)self.ctx.closePath();varrandAlpha=rand(50,100)/100;
  22. self.ctx.fillStyle='hsla('+this.hue+',100%,'+this.brightness+'%,'+randAlpha+')';
  23. self.ctx.fill();
  24. }
  25. }
  26. };

　　这段JS代码的功能是实现烟花爆炸后的小颗粒的绘制，从draw方法中可以看出，创建几个随机点，烟花颗粒即可在这个范围的随机点中散落。

JavaScript Code复制内容到剪贴板
  1. varFirework=function(startX,startY,targetX,targetY){this.x=startX;this.y=startY;this.startX=startX;this.startY=startY;this.hitX=false;this.hitY=false;this.coordLast=[
  2. {x:startX,y:startY},
  3. {x:startX,y:startY},
  4. {x:startX,y:startY}
  5. ];this.targetX=targetX;this.targetY=targetY;this.speed=self.fworkSpeed;this.angle=Math.atan2(targetY-startY,targetX-startX);this.shockwaveAngle=Math.atan2(targetY-startY,targetX-startX)+(90*(Math.PI/180));this.acceleration=self.fworkAccel/100;this.hue=self.currentHue;this.brightness=rand(50,80);this.alpha=rand(50,100)/100;this.lineWidth=self.lineWidth;this.targetRadius=1;
  6. };
  8. Firework.prototype.update=function(index){
  9. self.ctx.lineWidth=this.lineWidth;
  11. vx=Math.cos(this.angle)*this.speed,
  12. 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(self.showTarget){if(this.targetRadius<8){this.targetRadius+=.25*self.dt;
  13. }else{this.targetRadius=1*self.dt;
  14. }
  15. }if(this.startX>=this.targetX){if(this.x+vx<=this.targetX){this.x=this.targetX;this.hitX=true;
  16. }else{this.x+=vx*self.dt;
  17. }
  18. }else{if(this.x+vx>=this.targetX){this.x=this.targetX;this.hitX=true;
  19. }else{this.x+=vx*self.dt;
  20. }
  21. }if(this.startY>=this.targetY){if(this.y+vy<=this.targetY){this.y=this.targetY;this.hitY=true;
  22. }else{this.y+=vy*self.dt;
  23. }
  24. }else{if(this.y+vy>=this.targetY){this.y=this.targetY;this.hitY=true;
  25. }else{this.y+=vy*self.dt;
  26. }
  27. }if(this.hitX&&this.hitY){varrandExplosion=rand(0,9);
  28. self.createParticles(this.targetX,this.targetY,this.hue);
  29. self.fireworks.splice(index,1);
  30. }
  31. };
  33. Firework.prototype.draw=function(){
  34. self.ctx.lineWidth=this.lineWidth;varcoordRand=(rand(1,3)-1);
  35. self.ctx.beginPath();
  36. self.ctx.moveTo(Math.round(this.coordLast[coordRand].x),Math.round(this.coordLast[coordRand].y));
  37. self.ctx.lineTo(Math.round(this.x),Math.round(this.y));
  38. self.ctx.closePath();
  39. self.ctx.strokeStyle='hsla('+this.hue+',100%,'+this.brightness+'%,'+this.alpha+')';
  40. self.ctx.stroke();if(self.showTarget){
  41. self.ctx.save();
  42. self.ctx.beginPath();
  43. self.ctx.arc(Math.round(this.targetX),Math.round(this.targetY),this.targetRadius,0,Math.PI*2,false)
  44. self.ctx.closePath();
  45. self.ctx.lineWidth=1;
  46. self.ctx.stroke();
  47. self.ctx.restore();
  48. }if(self.showShockwave){
  49. self.ctx.save();
  50. self.ctx.translate(Math.round(this.x),Math.round(this.y));
  51. self.ctx.rotate(this.shockwaveAngle);
  52. self.ctx.beginPath();
  53. self.ctx.arc(0,0,1*(this.speed/5),0,Math.PI,true);
  54. self.ctx.strokeStyle='hsla('+this.hue+',100%,'+this.brightness+'%,'+rand(25,60)/100+')';
  55. self.ctx.lineWidth=this.lineWidth;
  56. self.ctx.stroke();
  57. self.ctx.restore();
  58. }
  59. };

　　这段JS代码是创建烟花实例的，我们也可以从draw方法中看出，当我们鼠标点击画布中的某点时，烟花发射的目的地就在那个点上。

　　这款HTML5 Canvas烟花效果的核心代码就是这样，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。

以上就是实例好代码教程 HTML5 Canvas 超炫酷烟花绽放动画如何实现代码。信者不疑人，人亦信之。自疑者不信人，人亦疑之。更多关于实例好代码教程 HTML5 Canvas 超炫酷烟花绽放动画如何实现代码请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
HTML5之高度塌陷问题的如何解决
html5笛卡尔心形曲线的如何实现
如何使用feDisplacementMap+feImage滤镜如何实现水波纹效果(计算动态值)
如何使用canvas对video视频某一刻截图功能
Canvas如何做个雪花屏版404的如何实现