如何用HTML5制作煙火效果

這篇文章主要介紹“如何用HTML5制作煙火效果”，在日常操作中，相信很多人在如何用HTML5制作煙火效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何用HTML5制作煙火效果”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)公司專業(yè)提供德陽服務(wù)器托管服務(wù)，為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案，用戶可自行在線購買德陽服務(wù)器托管服務(wù)，并享受7*24小時金牌售后服務(wù)。

原理很簡單。。。就寫一個煙火類以及碎屑類，實(shí)例化后讓它飛起來，然后到達(dá)某個點(diǎn)后，把這個煙火對象的dead屬性置為true，然后再實(shí)例化出一定數(shù)量的碎屑對象，并且給與碎屑對象隨機(jī)一個要到達(dá)的目標(biāo)點(diǎn)，然后讓所有碎屑對象飛過去就行了。

【煙火】

XML/HTML Code復(fù)制內(nèi)容到剪貼板

varBoom=function(x,r,c,boomArea,shape){//煙火對象

this.booms=?[];

this.x=?x;

this.y=?(canvas.height+r);

this.r=?r;

this.c=?c;

this.shape=?shape?||?false;

this.boomArea=?boomArea;

this.theta=0;

this.dead=false;

this.ba=parseInt(getRandom(80?,?200));

}

Boom.prototype=?{

_paint:function(){

ctx.save();

ctx.beginPath();

ctx.arc(this.x,this.y,this.r,0,2*Math.PI);

ctx.fillStyle=this.c;

ctx.fill();

ctx.restore();

_move:function(){

vardx=this.boomArea.x?-?this.x?,dy=this.boomArea.y?-?this.y;

thisthis.x=?this.x+dx*0.01;

thisthis.y=?this.y+dy*0.01;

if(Math.abs(dx)<=this.ba?&&?Math.abs(dy)<=this.ba){

if(this.shape){

this._shapBoom();

}

else?this._boom();

this.dead=true;

}

else?{

this._paint();

}

_drawLight:function(){

ctx.save();

ctx.fillStyle="rgba(255,228,150,0.3)";

ctx.beginPath();

ctx.arc(this.x?,?this.y?,?this.r+3*Math.random()+1?,?0?,?2*Math.PI);

ctx.fill();

ctx.restore();

_boom:function(){//普通爆炸

varfragNum=getRandom(30?,?200);

varstyle=getRandom(0,10)>=51?:?2;

var?color;

if(style===1){

color=?{

a:parseInt(getRandom(128,255)),

b:parseInt(getRandom(128,255)),

c:parseInt(getRandom(128,255))

}

varfanwei=parseInt(getRandom(300,?400));

for(vari=0;i

if(style===2){

color=?{

a:parseInt(getRandom(128,255)),

b:parseInt(getRandom(128,255)),

c:parseInt(getRandom(128,255))

}

vara=getRandom(-Math.PI,?Math.PI);

varx=getRandom(0,?fanwei)?*?Math.cos(a)?+?this.x;

vary=getRandom(0,?fanwei)?*?Math.sin(a)?+?this.y;

varradius=getRandom(0?,?2)

varfrag=newFrag(this.x?,?this.y?,?radius?,?color?,?x?,?y?);

this.booms.push(frag);

}

_shapBoom:function(){//有形狀的爆炸

varthat=this;

putValue(ocas?,?octx?,?this.shape?,?5,?function(dots){

vardx=canvas.width/2-that.x;

vardy=canvas.height/2-that.y;

for(vari=0;i

color=?{a:dots[i].a,b:dots[i].b,c:dots[i].c}

varx=dots[i].x;

vary=dots[i].y;

varradius=1;

varfrag=newFrag(that.x?,?that.y?,?radius?,?color?,?x-dx?,?y-dy);

that.booms.push(frag);

}

})

}

【碎屑】

XML/HTML Code復(fù)制內(nèi)容到剪貼板

varFrag=function(centerX?,?centerY?,?radius?,?color?,tx?,?ty){?//煙火碎屑對象

this.tx=?tx;

this.ty=?ty;

this.x=centerX;

this.y=centerY;

this.dead=false;

this.centerX=?centerX;

this.centerY=?centerY;

this.radius=?radius;

this.color=?color;

}

Frag.prototype=?{

paint:function(){

ctx.save();

ctx.beginPath();

ctx.arc(this.x?,?this.y?,?this.radius?,?0?,?2*Math.PI);

ctx.fillStyle="rgba("+this.color.a+","+this.color.b+","+this.color.c+",1)";

ctx.fill()

ctx.restore();

moveTo:function(index){

thisthis.ty=?this.ty+0.3;

vardx=this.tx?-?this.x?,dy=this.ty?-?this.y;

this.x=Math.abs(dx)<0.1this.tx?:?(this.x+dx*0.1);

this.y=Math.abs(dy)<0.1this.ty?:?(this.y+dy*0.1);

if(dx===0?&&?Math.abs(dy)<=80){

this.dead=true;

}

this.paint();

}

讓碎屑產(chǎn)生虛影也很簡單，就是每次刷新畫布時，不是擦掉重繪，而是繪制透明度為0.1(如果想虛影更長，可以把這個值弄的更小)的背景顏色。然后虛影就可以做出來了。也就是：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

ctx.save();

ctx.fillStyle="rgba(0,5,24,0.1)";

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

ctx.restore();

讓煙火形成自己想要的形狀，比如字體，圖片之類的，也很簡單，就是可以通過離屏canvas以及canvas的getImageData這個方法就可以做出來。離屏canvas，顧名思義就是離開屏幕的，也就是不可見的canvas，直接在js里面用document.createElement("canvas")就可以生成一個canvas dom對象了，只要不把這個dom對象賦給body，這個canvas對象就相當(dāng)于一個離屏對象了，我們就可以獲取到這個離屏canvas的context對象，然后再用戶看不到的地方做任何我們想做的事情了。

讓煙火形成自己想要的形狀就是先把文字或者圖片畫在離屏canvas上，然后用getImageData獲取畫布上的像素數(shù)組，然后遍歷數(shù)組，獲取有顏色的像素，也就是我們想要的內(nèi)容，保存起來后，再放到主canvas對象中顯示出來。

到此，關(guān)于“如何用HTML5制作煙火效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

新聞名稱：如何用HTML5制作煙火效果
新聞來源：http://bm7419.com/article4/ijpiie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)站收錄、虛擬主機(jī)、全網(wǎng)營銷推廣、網(wǎng)頁設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容