用HTML5制作烟火效果的教程

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

　　直接上DEMO吧：放烟火 

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

　　【烟火】

1. var Boom = 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.                 var dx = 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;   
26.   
27.                 if(Math.abs(dx)<=this.ba && Math.abs(dy)<=this.ba){   
28.                     if(this.shape){   
29.                         this._shapBoom();   
30.                     }   
31.                     else this._boom();   
32.                     this.dead = true;   
33.                 }   
34.                 else {   
35.                     this._paint();   
36.                 }   
37.      &n