要過年了，過年想到的就是放煙火啦。 。 。 。於是就用canvas寫了個放煙火的效果，滑鼠點擊也會產生煙火，不過不要產生太多煙火哦，一個煙火散出的粒子是30到200個之間，當頁面上的粒子數量達到一定的時候，頁面就會很卡咯，我也沒特意去優化神馬的。以後有空再說吧。
原理很簡單。 。 。就寫一個煙火類以及碎屑類，實例化後讓它飛起來，然後到達某個點後，把這個煙火對象的dead屬性置為true，然後再實例化出一定數量的碎屑對象，並且給與碎屑物件隨機一個要到達的目標點，然後讓所有碎屑物件飛過去就行了。
XML/HTML Code複製內容到剪貼簿
- var Boom = 函數(x,r,c,boomA. /煙火對象
-
this.booms = [];
-
this.x = x;
- = x;
- this.y = (canvas.height r); = (canvas.height r);
this.r-
= r; = r;
-
this.c = c;
- = c;
- this.shape = 形狀
this.boomArea = boomArea;
- this.theta = 0 = this.dead =
- this.ba = parse = parse =
- 5se
} -
Boom.prototype
= { -
_paint:function(){ -
ctx.save(); -
ctx.beginPath(); -
ctx.arc(this.x,this.y,this.r,0,2*Math.PI); -
ctx.fillStyle 🎜>
ctx.fill();
- ctx.restore();
- },
- _move:function(){
-
var dx 🎜>dy = 這.boomArea.y - this.y；
會
- 這這個.y
if(Math.abs(dx)- >=this.ba){
- if(this.shape){
-
this._shapBoom();
}
其他 this._boom();
-
- this.dead 🎜>
- }
- 其他 {
- this._paint();
}
},
- _drawLight:function(){
- ctx.save();
- ctx.fillStyle
- = 🎜>;
- ctx.beginPath();
- 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();
-
ctx.restore();
-
},
- _boom:function(){ //普通爆炸物
-
var fragNum
var 樣式
- >> =5？ 1：2；
以各種顏色中；
if(樣式===1){
- ===1){
-
顏色顏色
顏色- 顏色 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)), >
- c:parseInt(getRandom(128,255))
- }
- }
-
- var
fanwei- = );
-
for(var i=i=
🎜 >fragNum-
;i ){
if( >
顏色 會
b:parse5(getRandom(128,0 b:parseInt(getRandom(128,,555) ),
c:parseInt(getRandom(128,155) c:parseInt(getRandom(128,255)
-
}
}
-
var a = getRandom =
getRandom-
= getRandom;
var x
= -
getRandom = getRandom;
var
- y = getRandom
var 半徑
= -
getRandom(0 var frag =
新- , Frag(this.y.x,.0. 🎜>
this.booms.push(frag); -
-
}, -
-
var 石頭 = 石頭
; -
putValue(ocas, octx, this.shape, 5, 函數(點){ -
var dx = 畫布
.width/2-that.x; -
var dy = 畫布
= -
畫布 = 畫布 = 畫布
🎜>=0
- ;i點。長度;i ){
蘑菇 = {a:點[i].a,b:點[i].b,c:點[i].c}
-
var x
var ;
var - 半徑
var frag
that.booms.push(frag);
- }
})
}
- }
【碎片】
- XML/HTML 程式碼將內容複製到剪貼簿
-
var 片段 = 函數
- this.tx = tx; = tx;
- = tx; = tx; 我>
-
this.ty = ty; = ty;
-
this.x = this.y =
？
-
this.dead = this.centerX
= centerX;
-
this.centerY = centerY;
-
this.radius = 半徑； = 半徑；
- this.color = 顏色； = 顏色；
-
}
-
- Frag.prototype
- = {
paint:function(){
- ctx.save();
- ctx.beginPath();
- ctx.arc(this.x , this.y , this.radius , 0 , , this.y , this.radius , 0 , , this.y , this.radius , 0 , 2*M.PI>2*M.
- ctx.fillStylethis
-
ctx.fill()
ctx.restore();
},
- moveTo:函數（索引）{
-
這this.ty這
this.ty- var dx 🎜>dy = 這個.ty - 這個.y；
this.x-
=> 0.1 ？ this.tx：（this.x dx*0.1）；
this.y = 🎜 > 0.1 ？ this.ty : (this.y dy*0.1);
-
if(dx===0 & Math. 🎜>
this.dead 🎜>
}
-
this.paint();
}
}
-
要讓碎片碎片產生虛影也很簡單，就是每次刷新時，不是擦掉重繪，而是異構為0.1（如果想虛影更長，可以把這個值弄的更嚴重）小）的背景顏色。然後虛影就可以做出來了。 玄：
XML/HTML 程式碼
- 將內容複製到剪貼簿
-
ctx.save(); -
- 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
