先贴源码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>convas实现烟花效果</title> <style> body { background-color: #000000; margin: 0px; overflow: hidden; } </style> <script type="text/javascript" src="../jquery-2.2.4.js"></script> </head> <body> <script type="text/javascript"> var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight, mousePos = { x: 400, y: 300 }, // create canvas canvas = document.createElement('canvas'), context = canvas.getContext('2d'), particles = [], rockets = [], MAX_PARTICLES = 400, colorCode = 0; // init $(document).ready(function() { document.body.appendChild(canvas); canvas.width = SCREEN_WIDTH; canvas.height = SCREEN_HEIGHT; setInterval(launch, 800); setInterval(loop, 1000 / 50); }); // update mouse position $(document).mousemove(function(e) { e.preventDefault(); mousePos = { x: e.clientX, y: e.clientY }; }); // launch more rockets!!! $(document).mousedown(function(e) { for (var i = 0; i < 5; i++) { launchFrom(Math.random() * SCREEN_WIDTH * 2 / 3 + SCREEN_WIDTH / 6); } }); function launch() { launchFrom(mousePos.x); } function launchFrom(x) { if (rockets.length < 10) { var rocket = new Rocket(x); rocket.explosionColor = Math.floor(Math.random() * 360 / 10) * 10; rocket.vel.y = Math.random() * -3 - 4; rocket.vel.x = Math.random() * 6 - 3; rocket.size = 8; rocket.shrink = 0.999; rocket.gravity = 0.01; rockets.push(rocket); } } function loop() { // update screen size if (SCREEN_WIDTH != window.innerWidth) { canvas.width = SCREEN_WIDTH = window.innerWidth; } if (SCREEN_HEIGHT != window.innerHeight) { canvas.height = SCREEN_HEIGHT = window.innerHeight; } // clear canvas context.fillStyle = "rgba(0, 0, 0, 0.05)"; context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); var existingRockets = []; for (var i = 0; i < rockets.length; i++) { // update and render rockets[i].update(); rockets[i].render(context); // calculate distance with Pythagoras var distance = Math.sqrt(Math.pow(mousePos.x - rockets[i].pos.x, 2) + Math.pow(mousePos.y - rockets[i].pos.y, 2)); // random chance of 1% if rockets is above the middle var randomChance = rockets[i].pos.y < (SCREEN_HEIGHT * 2 / 3) ? (Math.random() * 100 <= 1) : false; /* Explosion rules - 80% of screen - going down - close to the mouse - 1% chance of random explosion */ if (rockets[i].pos.y < SCREEN_HEIGHT / 5 || rockets[i].vel.y >= 0 || distance < 50 || randomChance) { rockets[i].explode(); } else { existingRockets.push(rockets[i]); } } rockets = existingRockets; var existingParticles = []; for (var i = 0; i < particles.length; i++) { particles[i].update(); // render and save particles that can be rendered if (particles[i].exists()) { particles[i].render(context); existingParticles.push(particles[i]); } } // update array with existing particles - old particles should be garbage collected particles = existingParticles; while (particles.length > MAX_PARTICLES) { particles.shift(); } } function Particle(pos) { this.pos = { x: pos ? pos.x : 0, y: pos ? pos.y : 0 }; this.vel = { x: 0, y: 0 }; this.shrink = .97; this.size = 2; this.resistance = 1; this.gravity = 0; this.flick = false; this.alpha = 1; this.fade = 0; this.color = 0; } Particle.prototype.update = function() { // apply resistance this.vel.x *= this.resistance; this.vel.y *= this.resistance; // gravity down this.vel.y += this.gravity; // update position based on speed this.pos.x += this.vel.x; this.pos.y += this.vel.y; // shrink this.size *= this.shrink; // fade out this.alpha -= this.fade; }; Particle.prototype.render = function(c) { if (!this.exists()) { return; } c.save(); c.globalCompositeOperation = 'lighter'; var x = this.pos.x, y = this.pos.y, r = this.size / 2; var gradient = c.createRadialGradient(x, y, 0.1, x, y, r); gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")"); gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")"); gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)"); c.fillStyle = gradient; c.beginPath(); c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true); c.closePath(); c.fill(); c.restore(); }; Particle.prototype.exists = function() { return this.alpha >= 0.1 && this.size >= 1; }; function Rocket(x) { Particle.apply(this, [{ x: x, y: SCREEN_HEIGHT}]); this.explosionColor = 0; } Rocket.prototype = new Particle(); Rocket.prototype.constructor = Rocket; Rocket.prototype.explode = function() { var count = Math.random() * 10 + 80; for (var i = 0; i < count; i++) { var particle = new Particle(this.pos); var angle = Math.random() * Math.PI * 2; // emulate 3D effect by using cosine and put more particles in the middle var speed = Math.cos(Math.random() * Math.PI / 2) * 15; particle.vel.x = Math.cos(angle) * speed; particle.vel.y = Math.sin(angle) * speed; particle.size = 10; particle.gravity = 0.2; particle.resistance = 0.92; particle.shrink = Math.random() * 0.05 + 0.93; particle.flick = true; particle.color = this.explosionColor; particles.push(particle); } }; Rocket.prototype.render = function(c) { if (!this.exists()) { return; } c.save(); c.globalCompositeOperation = 'lighter'; var x = this.pos.x, y = this.pos.y, r = this.size / 2; var gradient = c.createRadialGradient(x, y, 0.1, x, y, r); gradient.addColorStop(0.1, "rgba(255, 255, 255 ," + this.alpha + ")"); gradient.addColorStop(1, "rgba(0, 0, 0, " + this.alpha + ")"); c.fillStyle = gradient; c.beginPath(); c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size / 2 + this.size / 2 : this.size, 0, Math.PI * 2, true); c.closePath(); c.fill(); c.restore(); }; </script> </body> </html
以上是别人的二维绘图，
转载地址：
http://www.laji.com/2021.03/2021.03.04/convas-fireworks.html
***************************************************
web 2D绘图一般用canvas
***************************************************
web 3D绘图一般用webgl
网址：https://www.html5tricks.com/tag/webgl
***************************************************
三维绘图：
https://blog.csdn.net/wuyouguo55/article/details/103714804
使用库ThingJS.
地址:https://www.jianshu.com/p/112c107fc50b
下面会整一个自己的: