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

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

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

【煙火】

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

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

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){?//煙火碎屑對(duì)象

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)生虛影也很簡(jiǎn)單，就是每次刷新畫布時(shí)，不是擦掉重繪，而是繪制透明度為0.1(如果想虛影更長(zhǎng)，可以把這個(gè)值弄的更小)的背景顏色。然后虛影就可以做出來了。也就是：

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();

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

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

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

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

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

廣告

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