阅读量:0
要实现HTML5 Canvas超炫酷烟花绽放动画，可以按照以下步骤进行：，，1. 创建一个HTML文件，添加一个`
元素，并设置宽度和高度。，2. 在JavaScript中，获取元素的上下文（context）。，3. 定义烟花粒子类，包含位置、速度、颜色等属性。，4. 创建烟花粒子数组，用于存储生成的烟花粒子。，5. 编写绘制烟花粒子的方法，根据粒子的属性在画布上绘制圆形。，6. 编写更新烟花粒子的方法，更新粒子的位置、速度等属性。，7. 使用requestAnimationFrame实现动画循环，不断调用绘制和更新方法。，，以下是实现代码：，，`html，，，，，，烟花绽放动画，， canvas {， display: block;， margin: 0 auto;， }，，，，，， const canvas = document.getElementById('fireworks');， const ctx = canvas.getContext('2d');， canvas.width = window.innerWidth;， canvas.height = window.innerHeight;，， class Particle {， constructor(x, y) {， this.x = x;， this.y = y;， this.size = Math.random() * 5 + 1;， this.speedX = Math.random() * 3 1.5;， this.speedY = Math.random() * 3 1.5;， this.color = hsl(${Math.random() * 360}, 100%, 50%)`;， }，， update() {， this.x += this.speedX;， this.y += this.speedY;， }，， draw() {， ctx.fillStyle = this.color;， ctx.beginPath();， ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);， ctx.closePath();， ctx.fill();， }， }，， const particles = [];，， function createFireworks(x, y) {， for (let i = 0; i< 50;="" i++)="" {，="" particles.push(new="" particle(x,="" y));，="" }，="" }，，="" function="" updateparticles()="" {，="" particles.foreach((particle,="" index)=""> {， particle.update();，， if (particle.sizeHTML5 Canvas 超炫酷烟花绽放动画实现代码
简介
我们将通过使用 HTML5 的<canvas> 元素和 JavaScript 来创建一段超炫酷的烟花绽放动画，这个动画将包括多个烟花粒子，它们会从地面发射到空中，然后绽放成美丽的图案，我们将一步步地讲解如何实现这个动画。
准备阶段
我们需要创建一个基本的 HTML 页面，并在其中添加一个<canvas> 元素，我们还需要引入一些基础的 CSS 样式来美化我们的页面。
HTML 结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <title>Fireworks Simulation</title> <style> body { background: #000; margin: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <canvas id="fireworks"></canvas> <script src="fireworks.js"></script> </body> </html>初始化 Canvas
我们需要获取对<canvas> 元素的引用，并设置其宽度和高度。
JavaScript 初始化代码
const canvas = document.getElementById('fireworks'); const ctx = canvas.getContext('2d'); // 设置画布大小为全屏 canvas.width = window.innerWidth; canvas.height = window.innerHeight;创建烟花粒子类
我们定义一个烟花粒子类，用于描述每个烟花粒子的行为和外观。
Particle 类定义
class Particle { constructor(x, y) { this.x = x; this.y = y; this.size = Math.random() * 5 + 1; // 随机大小 this.speedX = Math.random() * 3 1.5; // 随机水平速度 this.speedY = Math.random() * 3 1.5; // 随机垂直速度 this.color =hsl(${Math.random() * 360}, 100%, 50%); // 随机颜色 } update() { this.x += this.speedX; this.y += this.speedY; if (this.size > 0.2) this.size = 0.1; // 逐渐变小 } draw() { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); } }创建烟花类
我们定义一个烟花类，用于描述整个烟花的绽放过程。
Firework 类定义
class Firework { constructor(x, y, color) { this.x = x; this.y = y; this.color = color; this.particles = []; this.createParticles(); } createParticles() { for (let i = 0; i < 50; i++) { let angle = Math.random() * Math.PI * 2; let speed = Math.random() * 4 + 3; let size = Math.random() * 2 + 2; let particle = new Particle(this.x, this.y, this.color); particle.speedX = Math.cos(angle) * speed; particle.speedY = Math.sin(angle) * speed; particle.size = size; this.particles.push(particle); } } update() { for (let i = 0; i < this.particles.length; i++) { this.particles[i].update(); } this.particles = this.particles.filter(p => p.size > 0); // 移除已经消失的粒子 } draw() { for (let i = 0; i < this.particles.length; i++) { this.particles[i].draw(); } } }主循环函数
我们编写一个主循环函数，负责不断绘制新的烟花并更新现有的烟花。
主循环函数定义
let fireworks = []; function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布 for (let i = 0; i < fireworks.length; i++) { fireworks[i].update(); fireworks[i].draw(); if (fireworks[i].particles.length === 0) { fireworks.splice(i, 1); // 移除已经消失的烟花 i; } } setTimeout(animate, 20); // 每20毫秒重绘一次 } // 每秒产生一个新的烟花 setInterval(() => { let firework = new Firework(Math.random() * canvas.width, canvas.height,hsl(${Math.random() * 360}, 100%, 50%)); fireworks.push(firework); }, 1000);启动动画
调用animate 函数以启动动画。
animate();
完整代码整合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <title>Fireworks Simulation</title> <style> body { background: #000; margin: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <canvas id="fireworks"></canvas> <script> const canvas = document.getElementById('fireworks'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; class Particle { constructor(x, y) { this.x = x; this.y = y; this.size = Math.random() * 5 + 1; // 随机大小 this.speedX = Math.random() * 3 1.5; // 随机水平速度 this.speedY = Math.random() * 3 1.5; // 随机垂直速度 this.color =hsl(${Math.random() * 360}, 100%, 50%); // 随机颜色 } update() { this.x += this.speedX; this.y += this.speedY; if (this.size > 0.2) this.size = 0.1; // 逐渐变小 } draw() { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); } } class Firework { constructor(x, y, color) { this.x = x; this.y = y; this.color = color; this.particles = []; this.createParticles(); } createParticles() { for (let i = 0; i < 50; i++) { let angle = Math.random() * Math.PI * 2; let speed = Math.random() * 4 + 3; let size = Math.random() * 2 + 2; let particle = new Particle(this.x, this.y, this.color); particle.speedX = Math.cos(angle) * speed; particle.speedY = Math.sin(angle) * speed; particle.size = size; this.particles.push(particle); } } update() { for (let i = 0; i < this.particles.length; i++) { this.particles[i].update(); } this.particles = this.particles.filter(p => p.size > 0); // 移除已经消失的粒子 } draw() { for (let i = 0; i < this.particles.length; i++) { this.particles[i].draw(); } } } let fireworks = []; function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布 for (let i = 0; i < fireworks.length; i++) { fireworks[i].update(); fireworks[i].draw(); if (fireworks[i].particles.length === 0) { fireworks.splice(i, 1); // 移除已经消失的烟花 i; } } setTimeout(animate, 20); // 每20毫秒重绘一次 } // 每秒产生一个新的烟花 setInterval(() => { let firework = new Firework(Math.random() * canvas.width, canvas.height,hsl(${Math.random() * 360}, 100%, 50%)); fireworks.push(firework); }, 1000); animate(); // 启动动画循环函数 </script> </body> </html>HTML5 Canvas 超炫酷烟花绽放动画实现代码
简介
本教程将展示如何使用HTML5 Canvas API创建一个烟花绽放的动画效果，我们将使用JavaScript来控制动画，并利用Canvas的绘图能力来渲染烟花。
所需HTML结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <title>烟花动画</title> <style> body { margin: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <canvas id="fireworks"></canvas> <script src="fireworks.js"></script> </body> </html>JavaScript 代码（fireworks.js）
(function() { var canvas = document.getElementById('fireworks'); var ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var fireworks = []; var particles = []; var colors = ['#fff', '#0af', '#f80', '#f00', '#0f0', '#00f']; function random(min, max) { return Math.random() * (max min) + min; } function Firework(sx, sy, tx, ty) { this.x = sx; this.y = sy; this.sx = sx; this.sy = sy; this.tx = tx; this.ty = ty; this.distanceToTarget = Math.sqrt(Math.pow(tx sx, 2) + Math.pow(ty sy, 2)); this.distanceTraveled = 0; this.coordinates = []; this.coordinateCount = 3; while (this.coordinateCount) { this.coordinates.push([this.x, this.y]); } this.angle = Math.atan2(ty sy, tx sx); this.speed = 2; this.acceleration = 1.05; this.brightness = random(50, 70); this.targetRadius = 1; } Firework.prototype.update = function(index) { this.coordinates.pop(); this.coordinates.unshift([this.x, this.y]); if (this.targetRadius < 8) { this.targetRadius += 0.3; } else { this.targetRadius = 1; } this.speed *= this.acceleration; var vx = Math.cos(this.angle) * this.speed; var vy = Math.sin(this.angle) * this.speed; this.distanceTraveled = Math.sqrt(Math.pow(vx, 2) + Math.pow(vy, 2)); if (this.distanceTraveled >= this.distanceToTarget) { createParticles(this.tx, this.ty); fireworks.splice(index, 1); } else { this.x += vx; this.y += vy; } }; Firework.prototype.draw = function() { ctx.beginPath(); ctx.moveTo(this.coordinates[this.coordinates.length 1][0], this.coordinates[this.coordinates.length 1][1]); ctx.lineTo(this.x, this.y); ctx.strokeStyle = 'hsl(' + this.brightness + ', 100%, 50%)'; ctx.stroke(); ctx.beginPath(); ctx.arc(this.tx, this.ty, this.targetRadius, 0, Math.PI * 2); ctx.stroke(); }; function Particle(x, y) { this.x = x; this.y = y; this.coordinates = []; this.coordinateCount = 5; while (this.coordinateCount) { this.coordinates.push([this.x, this.y]); } this.angle = random(0, Math.PI * 2); this.speed = random(1, 10); this.friction = 0.95; this.gravity = 1; this.hue = random(0, 360); this.brightness = random(50, 80); this.alpha = 1; this.decay = random(0.015, 0.03); } Particle.prototype.update = function(index) { this.coordinates.pop(); this.coordinates.unshift([this.x, this.y]); this.speed *= this.friction; this.x += Math.cos(this.angle) * this.speed; this.y += Math.sin(this.angle) * this.speed + this.gravity; this.alpha = this.decay; if (this.alpha <= this.decay) { particles.splice(index, 1); } }; Particle.prototype.draw = function() { ctx.beginPath(); ctx.moveTo(this.coordinates[this.coordinates.length 1][0], this.coordinates[this.coordinates.length 1][1]); ctx.lineTo(this.x, this.y); ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')'; ctx.stroke(); }; function createParticles(x, y) { var particleCount = 30; while (particleCount) { particles.push(new Particle(x, y)); } } function loop() { requestAnimationFrame(loop); ctx.globalCompositeOperation = 'destinationout'; ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = 'lighter'; var i = fireworks.length; while (i) { fireworks[i].draw(); fireworks[i].update(i); } var i = particles.length; while (i) { particles[i].draw(); particles[i].update(i); } if (random(0, 10) < 1) { fireworks.push(new Firework(canvas.width / 2, canvas.height, random(0, canvas.width), random(0, canvas.height / 2))); } } loop(); window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); })();说明
使用requestAnimationFrame来创建平滑的动画循环。
Firework对象负责创建烟花轨迹和爆炸点。
Particle对象负责创建烟花爆炸后的粒子效果。
使用globalCompositeOperation来控制粒子效果的颜色混合。
当鼠标点击屏幕时，可以随机生成烟花效果。
这个代码片段是一个基本的烟花动画实现，可以根据需要进一步优化和扩展。
