要使用HTML5的<canvas>元素来制作一个烟花动画效果，你需要遵循以下步骤：
- 设置HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>烟花动画</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { background: #000; display: block; }
</style>
</head>
<body>
<canvas id="fireworksCanvas"></canvas>
<script src="fireworks.js"></script>
</body>
</html>
- 编写JavaScript代码 (
fireworks.js)：
以下是一个简化的烟花动画示例。这个示例会创建一个烟花，它会从底部飞向顶部并爆炸成粒子。
const canvas = document.getElementById('fireworksCanvas');
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.speedY = -Math.random() * 3 - 1;
this.speedX = Math.random() * 6 - 3;
this.alpha = 1;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
this.alpha -= 0.01;
}
draw() {
ctx.globalAlpha = this.alpha;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = 'white';
ctx.fill();
}
}
class Firework {
constructor() {
this.x = Math.random() * canvas.width;
this.y = canvas.height;
this.particles = [];
this.exploded = false;
}
update() {
if (!this.exploded) {
this.y -= 5;
if (this.y < 0) {
this.explode();
}
} else {
this.particles.forEach((p, i) => {
p.update();
if (p.alpha < 0) {
this.particles.splice(i, 1);
}
});
}
}
explode() {
this.exploded = true;
for (let i = 0; i < 100; i++) {
this.particles.push(new Particle(this.x, this.y));
}
}
draw() {
if (!this.exploded) {
ctx.beginPath();
ctx.arc(this.x, this.y, 10, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
} else {
this.particles.forEach(p => p.draw());
}
}
}
const fireworks = [];
setInterval(() => {
fireworks.push(new Firework());
}, 2000);
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
fireworks.forEach((fw, i) => {
fw.update();
fw.draw();
if (fw.particles.length === 0 && fw.exploded) {
fireworks.splice(i, 1);
}
});
requestAnimationFrame(animate);
}
animate();
这个代码示例创建了一个简单的烟花效果。你可以根据需要进一步扩展和优化它，例如添加更多的颜色、变化或交互功能。
标签：动画,canvas,exploded,ctx,烟花,particles,Math From： https://www.cnblogs.com/ai888/p/18640172