實(shí)例教程 HTML5 Canvas 超炫酷煙花綻放動(dòng)畫實(shí)現(xiàn)代碼

2020-03-24 18:23:32

字體：大中小

供稿：網(wǎng)友

這是一個(gè)很酷的HTML5 Canvas動(dòng)畫，它將模擬的是我們現(xiàn)實(shí)生活中煙花綻放的動(dòng)畫特效，效果非常逼真，但是畢竟是電腦模擬，帶女朋友看就算了，效果還是差了點(diǎn)，呵呵。這個(gè)HTML5 Canvas動(dòng)畫有一點(diǎn)比較出色，就是其性能，Chrome上基本沒(méi)有卡的感覺(jué)，就算你放出很多煙花也一樣。下面我們來(lái)簡(jiǎn)單分析一下實(shí)現(xiàn)這款HTML5煙花特效的過(guò)程及代碼，主要由HTML代碼、CSS代碼以及Javascript代碼組成，當(dāng)然javascript代碼是最重要的。 HTML代碼：XML/HTML Code復(fù)制內(nèi)容到剪貼板
divid= gui /div divid= canvas-container divid= mountains2 /div divid= mountains1 /div divid= skyline /div /div
HTML的結(jié)構(gòu)非常簡(jiǎn)單，即構(gòu)造了一個(gè)canvas容器，我們會(huì)利用JS在這個(gè)容器中生成一個(gè)Canvas對(duì)象。看最后的JS代碼你就會(huì)知道了。 CSS代碼：CSS Code復(fù)制內(nèi)容到剪貼板
#canvas-container{background:#000url(bg.jpg);height:400px;left:50%;margin:-200px00-300px;position:absolute;top:50%;width:600px;z-index:2; }canvas{cursor:crosshair;display:block;position:relative;z-index:3; }canvas:active{cursor:crosshair; }#skyline{background:url(skyline.png)repeat-x50%0;bottombottom:0;height:135px;left:0;position:absolute;width:100%;z-index:1; }#mountains1{background:url(mountains1.png)repeat-x40%0;bottombottom:0;height:200px;left:0;position:absolute;width:100%;z-index:1; }#mountains2{background:url(mountains2.png)repeat-x30%0;bottombottom:0;height:250px;left:0;position:absolute;width:100%;z-index:1; }#gui{rightright:0;position:fixed;top:0;z-index:3; }
CSS代碼沒(méi)什么特別，主要也就定義一下背景色和邊框之類的。接下來(lái)是最重要的Javascript代碼。 Javascript代碼：JavaScript Code復(fù)制內(nèi)容到剪貼板
self.oldTime=Date.now(); self.canvas=document.createElement('canvas'); self.canvasContainer=$('#canvas-container');varcanvasContainerDisabled=document.getElementById('canvas-container'); self.canvas.onselectstart=function(){returnfalse; }; self.canvas.width=self.cw=600; self.canvas.height=self.ch=400; self.particles=[]; self.partCount=30; self.fireworks=[]; self.mx=self.cw/2; self.my=self.ch/2; self.html' target='_blank'>currentHue=170; self.partSpeed=5; self.partSpeedVariance=10; self.partWind=50; self.partFriction=5; self.partGravity=1; self.hueMin=150; self.hueMax=200; self.fworkSpeed=2; self.fworkAccel=4; self.hueVariance=30; self.flickerDensity=20; self.showShockwave=false; self.showTarget=true; self.clearAlpha=25; self.canvasContainer.append(self.canvas); self.ctx=self.canvas.getContext('2d'); self.ctx.lineCap='round'; self.ctx.lineJoin='round'; self.lineWidth=1; self.bindEvents(); self.canvasLoop(); self.canvas.onselectstart=function(){returnfalse; }; };
這段JS代碼主要是往canvas容器中構(gòu)造一個(gè)Canvas對(duì)象，并且對(duì)這個(gè)canvas對(duì)象的外觀以及動(dòng)畫屬性作了初始化。JavaScript Code復(fù)制內(nèi)容到剪貼板
varParticle=function(x,y,hue){this.x=x;this.y=y;this.coordLast=[ {x:x,y:y}, {x:x,y:y}, {x:x,y:y} ];this.angle=rand(0,360);this.speed=rand(((self.partSpeed-self.partSpeedVariance) =0)?1:self.partSpeed-self.partSpeedVariance,(self.partSpeed+self.partSpeedVariance));this.friction=1-self.partFriction/100;this.gravity=self.partGravity/2;this.hue=rand(hue-self.hueVariance,hue+self.hueVariance);this.brightness=rand(50,80);this.alpha=rand(40,100)/100;this.decay=rand(10,50)/1000;this.wind=(rand(0,self.partWind)-(self.partWind/2))/25;this.lineWidth=self.lineWidth; }; Particle.prototype.update=function(index){varradians=this.angle*Math.PI/180;varvx=Math.cos(radians)*this.speed;varvy=Math.sin(radians)*this.speed+this.gravity;this.speed*=this.friction;this.coordLast[2].x=this.coordLast[1].x;this.coordLast[2].y=this.coordLast[1].y;this.coordLast[1].x=this.coordLast[0].x;this.coordLast[1].y=this.coordLast[0].y;this.coordLast[0].x=this.x;this.coordLast[0].y=this.y;this.x+=vx*self.dt;this.y+=vy*self.dt;this.angle+=this.wind;this.alpha-=this.decay;if(!hitTest(0,0,self.cw,self.ch,this.x-this.radius,this.y-this.radius,this.radius*2,this.radius*2)||this.alpha .05){ self.particles.splice(index,1); } }; Particle.prototype.draw=function(){varcoordRand=(rand(1,3)-1); self.ctx.beginPath(); self.ctx.moveTo(Math.round(this.coordLast[coordRand].x),Math.round(this.coordLast[coordRand].y)); self.ctx.lineTo(Math.round(this.x),Math.round(this.y)); self.ctx.closePath(); self.ctx.strokeStyle='hsla('+this.hue+',100%,'+this.brightness+'%,'+this.alpha+')'; self.ctx.stroke();if(self.flickerDensity 0){varinverseDensity=50-self.flickerDensity;if(rand(0,inverseDensity)===inverseDensity){ self.ctx.beginPath(); self.ctx.arc(Math.round(this.x),Math.round(this.y),rand(this.lineWidth,this.lineWidth+3)/2,0,Math.PI*2,false)self.ctx.closePath();varrandAlpha=rand(50,100)/100; self.ctx.fillStyle='hsla('+this.hue+',100%,'+this.brightness+'%,'+randAlpha+')'; self.ctx.fill(); } } };

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：html中的document對(duì)象是什么？一篇文章讓你了解d

下一篇：怎樣使用HTML meta優(yōu)化網(wǎng)頁(yè)