用HTML5制作烟火效果的教程_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;
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. },
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. var fragNum = getRandom(30 , 200);
48. var style = getRandom(0,10)>=5? 1 : 2;
49. var color;
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. var fanwei = parseInt(getRandom(300, 400));
59. for(var i=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. var a = getRandom(-Math.PI, Math.PI);
68. var x = getRandom(0, fanwei) * Math.cos(a) + this.x;
69. var y = getRandom(0, fanwei) * Math.sin(a) + this.y;