快过年了，用五种不同的JS特效带你看烟花（包邮送元宇宙图书）

Posted 2022-02-08 海拥✘

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了快过年了，用五种不同的JS特效带你看烟花（包邮送元宇宙图书）相关的知识，希望对你有一定的参考价值。

今天给大家带来几个好看的基于 html+CSS+JS 的烟花特效

雪花、樱花、 浪漫贺卡 以及 圣诞树 我前段时间刚做过，感兴趣的也可以看看我前几期的博客：

雪花：https://haiyong.blog.csdn.net/article/details/105786233
樱花：https://haiyong.blog.csdn.net/article/details/122008942
圣诞树和贺卡：https://haiyong.blog.csdn.net/article/details/122024043

🎇 五种不同的JS烟花特效

🍕 一、简单大气的烟花

演示地址：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>