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

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

一、简单大气的烟花

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

HTML代码：

这里的HTML代码很简短

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 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代码还是一样的简短

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 = $('').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0).getContext('2d');        this.contextTwigs = $('').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代码：

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代码：

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.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代码：

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如何实现五种不同烟花特效"这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注行业资讯频道！