实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码

2020-03-24 18:23:32

字体：大中小

来源：转载

供稿：网友

这是一个很酷的HTML5 Canvas动画，它将模拟的是我们现实生活中烟花绽放的动画特效，效果非常逼真，但是毕竟是电脑模拟，带女朋友看就算了，效果还是差了点，呵呵。这个HTML5 Canvas动画有一点比较出色，就是其性能，Chrome上基本没有卡的感觉，就算你放出很多烟花也一样。下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，主要由HTML代码、CSS代码以及Javascript代码组成，当然javascript代码是最重要的。 HTML代码：XML/HTML Code复制内容到剪贴板
divid= gui /div divid= canvas-container divid= mountains2 /div divid= mountains1 /div divid= skyline /div /div
HTML的结构非常简单，即构造了一个canvas容器，我们会利用JS在这个容器中生成一个Canvas对象。看最后的JS代码你就会知道了。 CSS代码：CSS Code复制内容到剪贴板
#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代码没什么特别，主要也就定义一下背景色和边框之类的。接下来是最重要的Javascript代码。 Javascript代码：JavaScript Code复制内容到剪贴板
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容器中构造一个Canvas对象，并且对这个canvas对象的外观以及动画属性作了初始化。JavaScript Code复制内容到剪贴板
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(); } } };

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：html中的document对象是什么？一篇文章让你了解d

下一篇：怎样使用HTML meta优化网页