用HTML5製作煙火效果的教學_html5教學技巧

要過年了，過年想到的就是放煙火啦。 。 。 。於是就用canvas寫了個放煙火的效果，滑鼠點擊也會產生煙火，不過不要產生太多煙火哦，一個煙火散出的粒子是30到200個之間，當頁面上的粒子數量達到一定的時候，頁面就會很卡咯，我也沒特意去優化神馬的。以後有空再說吧。

　　直接上DEMO吧：放煙火 

　　原理很簡單。 。 。就寫一個煙火類以及碎屑類，實例化後讓它飛起來，然後到達某個點後，把這個煙火對象的dead屬性置為true，然後再實例化出一定數量的碎屑對象，並且給與碎屑物件隨機一個要到達的目標點，然後讓所有碎屑物件飛過去就行了。

　　【煙火】

XML/HTML Code複製內容到剪貼簿

1. var Boom = 函數(x,r,c,boomA. /煙火對象  
2.             this.booms = [];   
3.             this.x = x;   
4.  = x;                
5. this.y = (canvas.height r);    = (canvas.height r);               
this.r
6.  = r;    = r;   
7.             this.c = c;   
8.  = c;                
9. this.shape = 形狀               this.boomArea = boomArea;            
10. this.theta = 0 =             this.dead = 
11.             this.ba = parse = parse = 
12. 5se
        }   
13.         Boom.prototype
 = {   
            _paint:function(){     
                ctx.save();   
                ctx.beginPath();   
                ctx.arc(this.x,this.y,this.r,0,2*Math.PI);   
18.                 ctx.fillStyle 🎜>                 ctx.fill();   
19.                 ctx.restore();   
20.             },   
21.             _move:function(){   
22.                 var dx  🎜>dy  = 這.boomArea.y - this.y；               會                 
23. 這這個.y  
                if(Math.abs(dx)
24. >=this.ba){   
25.                     if(this.shape){   
26.                         this._shapBoom();                        }                        其他 this._boom();   
27.                     
28. this.dead 🎜>
29.                 }   
30.                 其他 {   
31.                     this._paint();                    }                },   
32.             _drawLight:function(){   
33.                 ctx.save();   
34.                ctx.fillStyle
35.  = 🎜>;   
36.                 ctx.beginPath();   
37.                 ctx.arc(this.x , this.y , this.r 3*Math.random() 1 this.y , this.r 3*Math.random() 1 this.y , this.r 3*Math.random() 1 ,                 ctx.fill();   
38.                 ctx.restore();   
39.             },   
40.             _boom:function(){    //普通爆炸物   
41.                 var fragNum                 var 樣式
42.   >> =5？ 1：2；                    以各種顏色中；                   if(樣式===1){
43. ===1){
                    
44. 顏色顏色
顏色
45. 顏色                        a:parseInt(getRandom(128,255)),   a:parseInt(getRandom(128,255)),   a:parseInt(getRandom(128,255)),  
                        b:parseInt(getRandom(128,255)),   b:parseInt(getRandom(128,255)),   b:parseInt(getRandom(128,255)),   >
46.                         c:parseInt(getRandom(128,255))   
47.                     }   
48.                 }   
49.   
50.                 var 
fanwei
51.   = );   
52.                  for(var i=i=
🎜 >fragNum
53. ;i ){                        if( >                          顏色                          會                              b:parse5(getRandom(128,0     b:parseInt(getRandom(128,,555) ),
                            c:parseInt(getRandom(128,155)    c:parseInt(getRandom(128,255)
54.                         }                        }  
55.              var a = getRandom =
getRandom
56. = getRandom;                 var x
=
57. getRandom = getRandom;                 var 
58. y = getRandom  var 半徑
=
59. getRandom(0   var frag =
新
60. , Frag(this.y.x,.0. 🎜>
                this.booms.push(frag);   
                            
          },  
                                                             
64.              var 石頭 = 石頭
;   
          putValue(ocas, octx, this.shape, 5, 函數(點){  
66.              var dx = 畫布
.width/2-that.x;   
67.              var dy = 畫布
=
68. 畫布 = 畫布 = 畫布                               🎜>=0
69. ;i點。長度;i ){    蘑菇 = {a:點[i].a,b:點[i].b,c:點[i].c}  
70.                         var x                         var  ;   
                        var 
71. 半徑                         var frag                         that.booms.push(frag);   
72.                     }                    })                }   
73.         }    【碎片】
74. XML/HTML 程式碼將內容複製到剪貼簿
75. 1. var 片段 = 函數
    2.             this.tx = tx;    = tx;   
    3.  = tx;    = tx;    我>
                
    4. this.ty = ty;    = ty;   
                
    5. this.x =             this.y = 
    ？
    6.             this.dead =             this.centerX
     = centerX; 
    7.             this.centerY = centerY;
                
    8. this.radius = 半徑；    = 半徑；   
    9.             this.color = 顏色；    = 顏色；   
    10.         }   
    11.   
    12.         Frag.prototype
    13.  = {                paint:function(){   
    14.                 ctx.save();   
    15.                 ctx.beginPath();   
    16.                 ctx.arc(this.x , this.y , this.radius , 0 , , this.y , this.radius , 0 , , this.y , this.radius , 0 , 2*M.PI>2*M.                 
    17. ctx.fillStylethis
    18.                 ctx.fill()                    ctx.restore();                },   
    19.             moveTo:函數（索引）{   
    20.                 這this.ty這
    this.ty
    21.                 var dx  🎜>dy = 這個.ty - 這個.y；                    
    this.x
    22.  => 0.1 ？ this.tx：（this.x dx*0.1）；                    this.y = 🎜 > 0.1 ？ this.ty : (this.y dy*0.1);   
    23.                 if(dx===0 & Math. 🎜>                     this.dead 🎜>                 }   
    24.                 this.paint();                }            }  
    25. 要讓碎片碎片產生虛影也很簡單，就是每次刷新時，不是擦掉重繪，而是異構為0.1（如果想虛影更長，可以把這個值弄的更嚴重）小）的背景顏色。然後虛影就可以做出來了。 玄：             XML/HTML 程式碼
    26. 將內容複製到剪貼簿
    ctx.save();   
    29.             ctx.fillStyle

     = 

🎜>

            ctx.fillRect(0,0,canvas.width,canvas.height);   

            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