用HTML5制作烟火效果的好代码教程

网络
天气晴朗，天空万里无云，温暖的阳光洒在人的身上，就像是一位母亲轻轻地抚摸着我们，微风徐徐，波光粼粼，站在美丽的湖边尽情享受大自然的无穷魅力。

要过年了，过年想到的就是放烟火啦。。。。于是就用canvas写了个放烟火的效果，鼠标点击也会产生烟火，不过不要产生太多烟火哦，一个烟火散出的粒子是30到200个之间，当页面上的粒子数量达到一定的时候，页面就会很卡咯，我也没特意去优化神马的。以后有空再说吧。

　　直接上DEMO吧：放烟火

　　原理很简单。。。就写一个烟火类以及碎屑类，实例化后让它飞起来，然后到达某个点后，把这个烟火对象的dead属性置为true，然后再实例化出一定数量的碎屑对象，并且给与碎屑对象随机一个要到达的目标点，然后让所有碎屑对象飞过去就行了。

　　【烟火】

XML/HTML Code复制内容到剪贴板
  1. varBoom=function(x,r,c,boomArea,shape){//烟火对象
  2. this.booms=[];
  3. this.x=x;
  4. this.y=(canvas.height+r);
  5. this.r=r;
  6. this.c=c;
  7. this.shape=shape||false;
  8. this.boomArea=boomArea;
  9. this.theta=0;
  10. this.dead=false;
  11. this.ba=parseInt(getRandom(80,200));
  12. }
  13. Boom.prototype={
  14. _paint:function(){
  15. ctx.save();
  16. ctx.beginPath();
  17. ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
  18. ctx.fillStyle=this.c;
  19. ctx.fill();
  20. ctx.restore();
  21. },
  22. _move:function(){
  23. vardx=this.boomArea.x-this.x,dy=this.boomArea.y-this.y;
  24. thisthis.x=this.x+dx*0.01;
  25. thisthis.y=this.y+dy*0.01;
  27. if(Math.abs(dx)<=this.ba&&Math.abs(dy)<=this.ba){
  28. if(this.shape){
  29. this._shapBoom();
  30. }
  31. elsethis._boom();
  32. this.dead=true;
  33. }
  34. else{
  35. this._paint();
  36. }
  37. },
  38. _drawLight:function(){
  39. ctx.save();
  40. ctx.fillStyle="rgba(255,228,150,0.3)";
  41. ctx.beginPath();
  42. ctx.arc(this.x,this.y,this.r+3*Math.random()+1,0,2*Math.PI);
  43. ctx.fill();
  44. ctx.restore();
  45. },
  46. _boom:function(){//普通爆炸
  47. varfragNum=getRandom(30,200);
  48. varstyle=getRandom(0,10)>=5?1:2;
  49. varcolor;
  50. if(style===1){
  51. color={
  52. a:parseInt(getRandom(128,255)),
  53. b:parseInt(getRandom(128,255)),
  54. c:parseInt(getRandom(128,255))
  55. }
  56. }
  58. varfanwei=parseInt(getRandom(300,400));
  59. for(vari=0;i<fragNum;i++){
  60. if(style===2){
  61. color={
  62. a:parseInt(getRandom(128,255)),
  63. b:parseInt(getRandom(128,255)),
  64. c:parseInt(getRandom(128,255))
  65. }
  66. }
  67. vara=getRandom(-Math.PI,Math.PI);
  68. varx=getRandom(0,fanwei)*Math.cos(a)+this.x;
  69. vary=getRandom(0,fanwei)*Math.sin(a)+this.y;
  70. varradius=getRandom(0,2)
  71. varfrag=newFrag(this.x,this.y,radius,color,x,y);
  72. this.booms.push(frag);
  73. }
  74. },
  75. _shapBoom:function(){//有形状的爆炸
  76. varthat=this;
  77. putValue(ocas,octx,this.shape,5,function(dots){
  78. vardx=canvas.width/2-that.x;
  79. vardy=canvas.height/2-that.y;
  80. for(vari=0;i<dots.length;i++){
  81. color={a:dots[i].a,b:dots[i].b,c:dots[i].c}
  82. varx=dots[i].x;
  83. vary=dots[i].y;
  84. varradius=1;
  85. varfrag=newFrag(that.x,that.y,radius,color,x-dx,y-dy);
  86. that.booms.push(frag);
  87. }
  88. })
  89. }
  90. }


　　【碎屑】

XML/HTML Code复制内容到剪贴板
  1. varFrag=function(centerX,centerY,radius,color,tx,ty){//烟火碎屑对象
  2. this.tx=tx;
  3. this.ty=ty;
  4. this.x=centerX;
  5. this.y=centerY;
  6. this.dead=false;
  7. this.centerX=centerX;
  8. this.centerY=centerY;
  9. this.radius=radius;
  10. this.color=color;
  11. }
  13. Frag.prototype={
  14. paint:function(){
  15. ctx.save();
  16. ctx.beginPath();
  17. ctx.arc(this.x,this.y,this.radius,0,2*Math.PI);
  18. ctx.fillStyle="rgba("+this.color.a+","+this.color.b+","+this.color.c+",1)";
  19. ctx.fill()
  20. ctx.restore();
  21. },
  22. moveTo:function(index){
  23. thisthis.ty=this.ty+0.3;
  24. vardx=this.tx-this.x,dy=this.ty-this.y;
  25. this.x=Math.abs(dx)<0.1?this.tx:(this.x+dx*0.1);
  26. this.y=Math.abs(dy)<0.1?this.ty:(this.y+dy*0.1);
  27. if(dx===0&&Math.abs(dy)<=80){
  28. this.dead=true;
  29. }
  30. this.paint();
  31. }
  32. }


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

XML/HTML Code复制内容到剪贴板
  1. ctx.save();
  2. ctx.fillStyle="rgba(0,5,24,0.1)";
  3. ctx.fillRect(0,0,canvas.width,canvas.height);
  4. ctx.restore();

　　让烟火形成自己想要的形状，比如字体，图片之类的，也很简单，就是可以通过离屏canvas以及canvas的getImageData这个方法就可以做出来。离屏canvas，顾名思义就是离开屏幕的，也就是不可见的canvas，直接在js里面用document.createElement("canvas")就可以生成一个canvas dom对象了，只要不把这个dom对象赋给body，这个canvas对象就相当于一个离屏对象了，我们就可以获取到这个离屏canvas的context对象，然后再用户看不到的地方做任何我们想做的事情了。

　　让烟火形成自己想要的形状就是先把文字或者图片画在离屏canvas上，然后用getImageData获取画布上的像素数组，然后遍历数组，获取有颜色的像素，也就是我们想要的内容，保存起来后，再放到主canvas对象中显示出来。

　　getImageData的像素处理我之前的博客上有讲过，如果不会用的，请戳：随便谈谈用canvas来实现文字图片粒子化

　　源码地址：https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Funny-demo/shotFire

本文用HTML5制作烟火效果的好代码教程到此结束。书是知识的宝库；书是提高的阶梯；书是人类的高级营养品。我们能够经过读书学习获得很多的知识，从而提高自我的才能，使自我变得聪明起来。小编再次感谢大家对我们的支持！