JavaScript如何实现五种不同烟花特效

魁首哥

作者

JavaScript如何实现五种不同烟花特效

本文将为大家详细介绍“JavaScript如何实现五种不同烟花特效”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“JavaScript如何实现五种不同烟花特效”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

一、简单大气的烟花

演示地址：http://haiyong.site/fireworks1

HTML代码：

这里的HTML代码很简短

CSS代码

css也只有这两段内容

body{background:black;overflow:hidden;margin:0;}canvas{background:#000;}

JS代码

所有的源码都在这里了，复制粘贴即可

二、在农村看到的烟花

演示地址：http://haiyong.site/fireworks2（需要使用电脑打开，没做响应式手机端打开一片黑，或者可以看看后面的烟花）

HTML代码：

这里的HTML代码还是一样的简短

<divid="jsi-fireworks-container"class="container"></div>

CSS代码

css也只有这三段内容

html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background-color:#101010;}.container{position:absolute;width:500px;height:500px;top:50%;left:50%;margin-top:-250px;margin-left:-250px;}canvas{position:absolute;top:0;left:0;}

JS代码

JS代码比较长，我这里放了一部分

varRENDERER={LEAF_INTERVAL_RANGE:{min:100,max:200},FIREWORK_INTERVAL_RANGE:{min:20,max:200},SKY_COLOR:'hsla(210,60%,%luminance%,0.2)',STAR_COUNT:100,init:function(){this.setParameters();this.reconstructMethod();this.createTwigs();this.createStars();this.render();},setParameters:function(){this.$container=$('#jsi-fireworks-container');this.width=this.$container.width();this.height=this.$container.height();this.distance=Math.sqrt(Math.pow(this.width/2,2)+Math.pow(this.height/2,2));this.contextFireworks=$('<canvas/>').attr({width:this.width,height:this.height}).appendTo(this.$container).get(0).getContext('2d');this.contextTwigs=$('<canvas/>').attr({width:this.width,height:this.height}).appendTo(this.$container).get(0).getContext('2d');this.twigs=[];this.leaves=[newLEAF(this.width,this.height,this)];this.stars=[];this.fireworks=[newFIREWORK(this.width,this.height,this)];this.leafInterval=this.getRandomValue(this.LEAF_INTERVAL_RANGE)|0;this.maxFireworkInterval=this.getRandomValue(this.FIREWORK_INTERVAL_RANGE)|0;this.fireworkInterval=this.maxFireworkInterval;},reconstructMethod:function(){this.render=this.render.bind(this);},getRandomValue:function(range){returnrange.min+(range.max-range.min)*Math.random();},createTwigs:function(){this.twigs.push(newTWIG(this.width,this.height,0,0,Math.PI*3/4,0));this.twigs.push(newTWIG(this.width,this.height,this.width,0,-Math.PI*3/4,Math.PI));this.twigs.push(newTWIG(this.width,this.height,0,this.height,Math.PI/4,Math.PI));this.twigs.push(newTWIG(this.width,this.height,this.width,this.height,-Math.PI/4,0));},createStars:function(){for(vari=0,length=this.STAR_COUNT;i<length;i++){this.stars.push(newSTAR(this.width,this.height,this.contextTwigs,this));}},render:function(){requestAnimationFrame(this.render);varmaxOpacity=0,contextTwigs=this.contextTwigs,contextFireworks=this.contextFireworks;for(vari=this.fireworks.length-1;i>=0;i--){maxOpacity=Math.max(maxOpacity,this.fireworks[i].getOpacity());}contextTwigs.clearRect(0,0,this.width,this.height);contextFireworks.fillStyle=this.SKY_COLOR.replace('%luminance',5+maxOpacity*15);contextFireworks.fillRect(0,0,this.width,this.height);for(vari=this.fireworks.length-1;i>=0;i--){if(!this.fireworks[i].render(contextFireworks)){this.fireworks.splice(i,1);}}for(vari=this.stars.length-1;i>=0;i--){this.stars[i].render(contextTwigs);}for(vari=this.twigs.length-1;i>=0;i--){this.twigs[i].render(contextTwigs);}for(vari=this.leaves.length-1;i>=0;i--){if(!this.leaves[i].render(contextTwigs)){this.leaves.splice(i,1);}}if(--this.leafInterval==0){this.leaves.push(newLEAF(this.width,this.height,this));this.leafInterval=this.getRandomValue(this.LEAF_INTERVAL_RANGE)|0;}if(--this.fireworkInterval==0){this.fireworks.push(newFIREWORK(this.width,this.height,this));this.maxFireworkInterval=this.getRandomValue(this.FIREWORK_INTERVAL_RANGE)|0;this.fireworkInterval=this.maxFireworkInterval;}}};

三、可点击的烟花

演示地址：http://haiyong.site/fireworks3

HTML代码：

<canvasid="canvas"></canvas>

CSS代码

body{background-color:#000;}canvas{display:block;margin:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;}

完整JS代码

四、3D旋转烟花

演示地址：http://haiyong.site/fireworks4

HTML代码：

<canvasid="canvas"></canvas>

CSS代码

html,body{margin:0px;width:100%;height:100%;overflow:hidden;background:#000;}#canvas{width:100%;height:100%;}

部分JS代码

JS代码比较长我就不全列出来了

functioninitVars(){pi=Math.PI;ctx=canvas.getContext("2d");canvas.width=canvas.clientWidth;canvas.height=canvas.clientHeight;cx=canvas.width/2;cy=canvas.height/2;playerZ=-25;playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;scale=600;seedTimer=0;seedInterval=5,seedLife=100;gravity=.02;seeds=newArray();sparkPics=newArray();s="https://cantelope.org/NYE/";for(i=1;i<=10;++i){sparkPic=newImage();sparkPic.src=s+"spark"+i+".png";sparkPics.push(sparkPic);}sparks=newArray();pow1=newAudio(s+"pow1.ogg");pow2=newAudio(s+"pow2.ogg");pow3=newAudio(s+"pow3.ogg");pow4=newAudio(s+"pow4.ogg");frames=0;}functionrasterizePoint(x,y,z){varp,d;x-=playerX;y-=playerY;z-=playerZ;p=Math.atan2(x,z);d=Math.sqrt(x*x+z*z);x=Math.sin(p-yaw)*d;z=Math.cos(p-yaw)*d;p=Math.atan2(y,z);d=Math.sqrt(y*y+z*z);y=Math.sin(p-pitch)*d;z=Math.cos(p-pitch)*d;varrx1=-1000,ry1=1,rx2=1000,ry2=1,rx3=0,ry3=0,rx4=x,ry4=z,uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);if(!uc)return{x:0,y:0,d:-1};varua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;varub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;if(!z)z=.000000001;if(ua>0&&ua<1&&ub>0&&ub<1){return{x:cx+(rx1+ua*(rx2-rx1))*scale,y:cy+y/z*scale,d:Math.sqrt(x*x+y*y+z*z)};}else{return{x:cx+(rx1+ua*(rx2-rx1))*scale,y:cy+y/z*scale,d:-1};}}functionspawnSeed(){seed=newObject();seed.x=-50+Math.random()*100;seed.y=25;seed.z=-50+Math.random()*100;seed.vx=.1-Math.random()*.2;seed.vy=-1.5;//*(1+Math.random()/2);seed.vz=.1-Math.random()*.2;seed.born=frames;seeds.push(seed);}

五、可拖动视角的自定义烟花

演示地址：http://haiyong.site/fireworks5

HTML代码：

<divid="WebGL-output"></div>

CSS代码

body{margin:0;overflow:hidden;background:-webkit-linear-gradient(0deg,rgb(0,12,91),rgb(0,0,0));background:linear-gradient(0deg,rgb(0,12,91),rgb(0,0,0));}

部分JS代码

JS代码比较长我就不全列出来了

letscene,camera,renderer,orbitControls,planeMesh,canvasTexture,isAutoLaunch=true;constgravity=newTHREE.Vector3(0,-0.005,0);constfriction=0.998;constnoise=newSimplexNoise();consttextureSize=128.0;constfireworksInstances=[];letoutputDom;constgetOffsetXYZ=i=>{constoffset=3;constindex=i*offset;constx=index;consty=index+1;constz=index+2;return{x,y,z};};constgetOffsetRGBA=i=>{constoffset=4;constindex=i*offset;constr=index;constg=index+1;constb=index+2;consta=index+3;return{r,g,b,a};};constgui=newdat.GUI();constguiControls=newfunction(){this.ParticleSize=300;this.AutoLaunch=true;}();gui.add(guiControls,'ParticleSize',100,600);gui.add(guiControls,'AutoLaunch').onChange(e=>{isAutoLaunch=e;outputDom.style.cursor=isAutoLaunch?'auto':'pointer';});constgetRandomNum=(max=0,min=0)=>Math.floor(Math.random()*(max+1-min))+min;constlaunchFireWorks=()=>{if(fireworksInstances.length>5)return;constfw=Math.random()>8?newBasicFIreWorks():newRichFIreWorks();fireworksInstances.push(fw);scene.add(fw.meshGroup);};constautoLaunch=()=>{if(!isAutoLaunch)return;if(Math.random()>0.7)launchFireWorks();};constdrawRadialGradation=(ctx,canvasRadius,canvasW,canvasH)=>{ctx.save();constgradient=ctx.createRadialGradient(canvasRadius,canvasRadius,0,canvasRadius,canvasRadius,canvasRadius);gradient.addColorStop(0.0,'rgba(255,255,255,1.0)');gradient.addColorStop(0.5,'rgba(255,255,255,0.5)');gradient.addColorStop(1.0,'rgba(255,255,255,0)');ctx.fillStyle=gradient;ctx.fillRect(0,0,canvasW,canvasH);ctx.restore();};constgetTexture=()=>{constcanvas=document.createElement('canvas');constctx=canvas.getContext('2d');constdiameter=textureSize;canvas.width=diameter;canvas.height=diameter;constcanvasRadius=diameter/2;drawRadialGradation(ctx,canvasRadius,canvas.width,canvas.height);consttexture=newTHREE.Texture(canvas);texture.type=THREE.FloatType;texture.needsUpdate=true;returntexture;};canvasTexture=getTexture();constgetPointMesh=(num,vels,type)=>{constbufferGeometry=newTHREE.BufferGeometry();constvertices=[];constvelocities=[];constcolors=[];constadjustSizes=[];constmasses=[];constcolorType=Math.random()>0.3?'single':'multiple';constsingleColor=getRandomNum(100,20)*0.01;constmultipleColor=()=>getRandomNum(100,1)*0.01;letrgbType;constrgbTypeDice=Math.random();if(rgbTypeDice>0.66){rgbType='red';}elseif(rgbTypeDice>0.33){rgbType='green';}else{rgbType='blue';}for(leti=0;i<num;i++){constpos=newTHREE.Vector3(0,0,0);vertices.push(pos.x,pos.y,pos.z);velocities.push(vels[i].x,vels[i].y,vels[i].z);if(type==='seed'){letsize;if(type==='trail'){size=Math.random()*0.1+0.1;}else{size=Math.pow(vels[i].y,2)*0.04;}if(i===0)size*=1.1;adjustSizes.push(size);masses.push(size*0.017);colors.push(1.0,1.0,1.0,1.0);}else{constsize=getRandomNum(guiControls.ParticleSize,10)*0.001;adjustSizes.push(size);masses.push(size*0.017);if(colorType==='multiple'){colors.push(multipleColor(),multipleColor(),multipleColor(),1.0);}else{switch(rgbType){case'red':colors.push(singleColor,0.1,0.1,1.0);break;case'green':colors.push(0.1,singleColor,0.1,1.0);break;case'blue':colors.push(0.1,0.1,singleColor,1.0);break;default:colors.push(singleColor,0.1,0.1,1.0);}}}}bufferGeometry.addAttribute('position',newTHREE.Float32BufferAttribute(vertices,3).setDynamic(true));bufferGeometry.addAttribute('velocity',newTHREE.Float32BufferAttribute(velocities,3).setDynamic(true));bufferGeometry.addAttribute('color',newTHREE.Float32BufferAttribute(colors,4).setDynamic(true));bufferGeometry.addAttribute('adjustSize',newTHREE.Float32BufferAttribute(adjustSizes,1).setDynamic(true));bufferGeometry.addAttribute('mass',newTHREE.Float32BufferAttribute(masses,1).setDynamic(true));