JavaScript如何实现五种不同烟花特效
短信预约 -IT技能 免费直播动态提醒
本文将为大家详细介绍“JavaScript如何实现五种不同烟花特效”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“JavaScript如何实现五种不同烟花特效”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。
一、简单大气的烟花
演示地址：http://haiyong.site/fireworks1
HTML代码：
这里的HTML代码很简短
<div> <canvas id="canvas"></canvas></div>CSS代码
css也只有这两段内容
body{ background:black; overflow:hidden; margin:0;}canvas{ background:#000;}JS代码
所有的源码都在这里了，复制粘贴即可
window.addEventListener("resize", resizeCanvas, false);window.addEventListener("DOMContentLoaded", onLoad, false);window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000/60);}; var canvas, ctx, w, h, particles = [], probability = 0.04, xPoint, yPoint; function onLoad() { canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); resizeCanvas(); window.requestAnimationFrame(updateWorld); } function resizeCanvas() { if (!!canvas) { w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight; } } function updateWorld() { update(); paint(); window.requestAnimationFrame(updateWorld); } function update() { if (particles.length < 500 && Math.random() < probability) { createFirework(); } var alive = []; for (var i=0; i<particles.length; i++) { if (particles[i].move()) { alive.push(particles[i]); } } particles = alive; } function paint() { ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = "rgba(0,0,0,0.2)"; ctx.fillRect(0, 0, w, h); ctx.globalCompositeOperation = 'lighter'; for (var i=0; i<particles.length; i++) { particles[i].draw(ctx); } } function createFirework() { xPoint = Math.random()*(w-200)+100; yPoint = Math.random()*(h-200)+100; var nFire = Math.random()*50+100; var c = "rgb("+(~~(Math.random()*200+55))+"," +(~~(Math.random()*200+55))+","+(~~(Math.random()*200+55))+")"; for (var i=0; i<nFire; i++) { var particle = new Particle(); particle.color = c; var vy = Math.sqrt(25-particle.vx*particle.vx); if (Math.abs(particle.vy) > vy) { particle.vy = particle.vy>0 ? vy: -vy; } particles.push(particle); } } function Particle() { this.w = this.h = Math.random()*4+1; this.x = xPoint-this.w/2; this.y = yPoint-this.h/2; this.vx = (Math.random()-0.5)*10; this.vy = (Math.random()-0.5)*10; this.alpha = Math.random()*.5+.5; this.color; } Particle.prototype = { gravity: 0.05, move: function () { this.x += this.vx; this.vy += this.gravity; this.y += this.vy; this.alpha -= 0.01; if (this.x <= -this.w || this.x >= screen.width || this.y >= screen.height || this.alpha <= 0) { return false; } return true; }, draw: function (c) { c.save(); c.beginPath(); c.translate(this.x+this.w/2, this.y+this.h/2); c.arc(0, 0, this.w, 0, Math.PI*2); c.fillStyle = this.color; c.globalAlpha = this.alpha; c.closePath(); c.fill(); c.restore(); } }二、在农村看到的烟花
演示地址：http://haiyong.site/fireworks2（需要使用电脑打开，没做响应式手机端打开一片黑，或者可以看看后面的烟花）
HTML代码：
这里的HTML代码还是一样的简短
<div id="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代码比较长，我这里放了一部分
var RENDERER = { 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 = [new LEAF(this.width, this.height, this)]; this.stars = []; this.fireworks = [new FIREWORK(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){ return range.min + (range.max - range.min) * Math.random(); }, createTwigs : function(){ this.twigs.push(new TWIG(this.width, this.height, 0, 0, Math.PI * 3 / 4, 0)); this.twigs.push(new TWIG(this.width, this.height, this.width, 0, -Math.PI * 3 / 4, Math.PI)); this.twigs.push(new TWIG(this.width, this.height, 0, this.height, Math.PI / 4, Math.PI)); this.twigs.push(new TWIG(this.width, this.height, this.width, this.height, -Math.PI / 4, 0)); }, createStars : function(){ for(var i = 0, length = this.STAR_COUNT; i < length; i++){ this.stars.push(new STAR(this.width, this.height, this.contextTwigs, this)); } }, render : function(){ requestAnimationFrame(this.render); var maxOpacity = 0, contextTwigs = this.contextTwigs, contextFireworks = this.contextFireworks; for(var i = 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(var i = this.fireworks.length - 1; i >= 0; i--){ if(!this.fireworks[i].render(contextFireworks)){ this.fireworks.splice(i, 1); } } for(var i = this.stars.length - 1; i >= 0; i--){ this.stars[i].render(contextTwigs); } for(var i = this.twigs.length - 1; i >= 0; i--){ this.twigs[i].render(contextTwigs); } for(var i = 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(new LEAF(this.width, this.height, this)); this.leafInterval = this.getRandomValue(this.LEAF_INTERVAL_RANGE) | 0; } if(--this.fireworkInterval == 0){ this.fireworks.push(new FIREWORK(this.width, this.height, this)); this.maxFireworkInterval = this.getRandomValue(this.FIREWORK_INTERVAL_RANGE) | 0; this.fireworkInterval = this.maxFireworkInterval; } }};三、可点击的烟花
演示地址：http://haiyong.site/fireworks3
HTML代码：
<canvas id="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代码
(function() { var Fireworks, GRAVITY, K, SPEED, ToRadian, canvas, context, ctx, fireBoss, repeat, stage; canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; stage = new createjs.Stage(canvas); stage.autoClear = false; ctx = canvas.getContext("2d"); ctx.fillStyle = "rgba(0, 0, 0, 0)"; ctx.fillRect(0, 0, canvas.width, canvas.height); createjs.Ticker.setFPS(50); createjs.Touch.enable(stage); stage.update(); // 重力 GRAVITY = 1; // 抵抗 K = 0.9; // 速度 SPEED = 12; // 从度数转换为弧度 ToRadian = function(degree) { return degree * Math.PI / 180.0; }; // 制作烟花的class Fireworks = class Fireworks { constructor(sx = 100, sy = 100, particles = 70) { var circle, i, j, rad, ref, speed; this.sx = sx; this.sy = sy; this.particles = particles; this.sky = new createjs.Container(); this.r = 0; this.h = Math.random() * 360 | 0; this.s = 100; this.l = 50; this.size = 3; for (i = j = 0, ref = this.particles; (0 <= ref ? j < ref : j > ref); i = 0 <= ref ? ++j : --j) { speed = Math.random() * 12 + 2; circle = new createjs.Shape(); circle.graphics.f(`hsla(${this.h}, ${this.s}%, ${this.l}%, 1)`).dc(0, 0, this.size); circle.snapToPixel = true; circle.compositeOperation = "lighter"; rad = ToRadian(Math.random() * 360 | 0); circle.set({ x: this.sx, y: this.sy, vx: Math.cos(rad) * speed, vy: Math.sin(rad) * speed, rad: rad }); this.sky.addChild(circle); } stage.addChild(this.sky); } explode() { var circle, j, p, ref; if (this.sky) { ++this.h; for (p = j = 0, ref = this.sky.getNumChildren(); (0 <= ref ? j < ref : j > ref); p = 0 <= ref ? ++j : --j) { circle = this.sky.getChildAt(p); // 加速度 circle.vx = circle.vx * K; circle.vy = circle.vy * K; // 位置计算 circle.x += circle.vx; circle.y += circle.vy + GRAVITY; this.l = Math.random() * 100; // 粒度 this.size = this.size - 0.001; if (this.size > 0) { circle.graphics.c().f(`hsla(${this.h}, 100%, ${this.l}%, 1)`).dc(0, 0, this.size); } } if (this.sky.alpha > 0.1) { this.sky.alpha -= K / 50; } else { stage.removeChild(this.sky); this.sky = null; } } else { } } }; fireBoss = []; setInterval(function() { ctx.fillStyle = "rgba(0, 0, 0, 0.1)"; ctx.fillRect(0, 0, canvas.width, canvas.height); }, 40); setInterval(function() { var x, y; x = Math.random() * canvas.width | 0; y = Math.random() * canvas.height | 0; fireBoss.push(new Fireworks(x, y)); return fireBoss.push(new Fireworks(x, y)); }, 1300); repeat = function() { var fireworks, j, ref; for (fireworks = j = 0, ref = fireBoss.length; (0 <= ref ? j < ref : j > ref); fireworks = 0 <= ref ? ++j : --j) { if (fireBoss[fireworks].sky) { fireBoss[fireworks].explode(); } } stage.update(); }; createjs.Ticker.on("tick", repeat); stage.addEventListener("stagemousedown", function() { fireBoss.push(new Fireworks(stage.mouseX, stage.mouseY)); return fireBoss.push(new Fireworks(stage.mouseX, stage.mouseY)); }); }).call(this);四、3D旋转烟花
演示地址：http://haiyong.site/fireworks4
HTML代码：
<canvas id="canvas"></canvas>CSS代码
html,body{ margin:0px; width:100%; height:100%; overflow:hidden; background:#000;}#canvas{ width:100%; height:100%;}部分JS代码
JS代码比较长我就不全列出来了
function initVars(){ 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=new Array(); sparkPics=new Array(); s="https://cantelope.org/NYE/"; for(i=1;i<=10;++i){ sparkPic=new Image(); sparkPic.class="lazy" data-src=s+"spark"+i+".png"; sparkPics.push(sparkPic); } sparks=new Array(); pow1=new Audio(s+"pow1.ogg"); pow2=new Audio(s+"pow2.ogg"); pow3=new Audio(s+"pow3.ogg"); pow4=new Audio(s+"pow4.ogg"); frames = 0;}function rasterizePoint(x,y,z){ var p,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; var rx1=-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}; var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc; var ub=((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 }; }}function spawnSeed(){ seed=new Object(); 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代码：
<div id="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代码比较长我就不全列出来了
let scene,camera,renderer,orbitControls,planeMesh,canvasTexture,isAutoLaunch = true;const gravity = new THREE.Vector3(0, -0.005, 0);const friction = 0.998;const noise = new SimplexNoise();const textureSize = 128.0;const fireworksInstances = [];let outputDom;const getOffsetXYZ = i => { const offset = 3; const index = i * offset; const x = index; const y = index + 1; const z = index + 2; return { x, y, z };};const getOffsetRGBA = i => { const offset = 4; const index = i * offset; const r = index; const g = index + 1; const b = index + 2; const a = index + 3; return { r, g, b, a };};const gui = new dat.GUI();const guiControls = new function () { 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';});const getRandomNum = (max = 0, min = 0) => Math.floor(Math.random() * (max + 1 - min)) + min;const launchFireWorks = () => { if (fireworksInstances.length > 5) return; const fw = Math.random() > 8 ? new BasicFIreWorks() : new RichFIreWorks(); fireworksInstances.push(fw); scene.add(fw.meshGroup);};const autoLaunch = () => { if (!isAutoLaunch) return; if (Math.random() > 0.7) launchFireWorks();};const drawRadialGradation = (ctx, canvasRadius, canvasW, canvasH) => { ctx.save(); const gradient = 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();};const getTexture = () => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const diameter = textureSize; canvas.width = diameter; canvas.height = diameter; const canvasRadius = diameter / 2; drawRadialGradation(ctx, canvasRadius, canvas.width, canvas.height); const texture = new THREE.Texture(canvas); texture.type = THREE.FloatType; texture.needsUpdate = true; return texture;};canvasTexture = getTexture();const getPointMesh = (num, vels, type) => { const bufferGeometry = new THREE.BufferGeometry(); const vertices = []; const velocities = []; const colors = []; const adjustSizes = []; const masses = []; const colorType = Math.random() > 0.3 ? 'single' : 'multiple'; const singleColor = getRandomNum(100, 20) * 0.01; const multipleColor = () => getRandomNum(100, 1) * 0.01; let rgbType; const rgbTypeDice = Math.random(); if (rgbTypeDice > 0.66) { rgbType = 'red'; } else if (rgbTypeDice > 0.33) { rgbType = 'green'; } else { rgbType = 'blue'; } for (let i = 0; i < num; i++) { const pos = new THREE.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') { let size; 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 { const size = 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', new THREE.Float32BufferAttribute(vertices, 3).setDynamic(true)); bufferGeometry.addAttribute('velocity', new THREE.Float32BufferAttribute(velocities, 3).setDynamic(true)); bufferGeometry.addAttribute('color', new THREE.Float32BufferAttribute(colors, 4).setDynamic(true)); bufferGeometry.addAttribute('adjustSize', new THREE.Float32BufferAttribute(adjustSizes, 1).setDynamic(true)); bufferGeometry.addAttribute('mass', new THREE.Float32BufferAttribute(masses, 1).setDynamic(true));JavaScript可以做什么
1.可以使网页具有交互性，例如响应用户点击，给用户提供更好的体验。2.可以处理表单，检验用户的输入，并提供及时反馈节省用户时间。3.可以根据用户的操作，动态的创建页面。4使用JavaScript可以通过设置cookie存储在浏览器上的一些临时信息。
如果你能读到这里，小编希望你对“JavaScript如何实现五种不同烟花特效”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
