admin管理员组文章数量:1438146
html制作一个放烟花动画的网页代码
以下是一个用HTML制作的烟花动画网页代码，结合了粒子效果和重力模拟：
html
<!DOCTYPE html>
<html>
<head>
<title>烟花秀</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #000;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
canvas {
border: 1px solid #333;
}
</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;
// 烟花粒子数组
const particles = [];
const fireworks = [];
// 烟花参数
const gravity = 0.1;
const friction = 0.99;
class Particle {
constructor(x, y, hue) {
this.x = x;
this.y = y;
this.vx = (Math.random() - 0.5) * 10;
this.vy = (Math.random() - 0.5) * 10;
this.hue = hue;
this.radius = Math.random() * 3 + 1;
this.alpha = 1;
}
update() {
this.vx *= friction;
this.vy *= friction;
this.vy += gravity;
this.x += this.vx;
this.y += this.vy;
this.alpha -= 0.015;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = `hsla(${this.hue}, 100%, 50%, ${this.alpha})`;
ctx.fill();
}
}
class Firework {
constructor() {
this.x = Math.random() * canvas.width;
this.y = canvas.height;
this.hue = Math.random() * 360;
this.target = {
x: Math.random() * canvas.width,
y: canvas.height * 0.3
};
this.speed = 5;
this.exploded = false;
this.particles = [];
}
update() {
if (!this.exploded) {
// 计算移动方向
const dx = this.target.x - this.x;
const dy = this.target.y - this.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 10) {
this.explode();
} else {
this.x += (dx / distance) * this.speed;
this.y += (dy / distance) * this.speed;
}
}
this.particles.forEach(particle => {
particle.update();
});
}
explode() {
this.exploded = true;
for (let i = 0; i < 100; i++) {
this.particles.push(new Particle(this.x, this.y, this.hue));
}
}
draw() {
if (!this.exploded) {
ctx.beginPath();
ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
ctx.fillStyle = `hsla(${this.hue}, 100%, 50%, 1)`;
ctx.fill();
}
this.particles.forEach(particle => {
particle.draw();
});
}
}
function createFirework() {
fireworks.push(new Firework());
}
// 动画循环
function animate() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
fireworks.forEach((firework, index) => {
firework.update();
firework.draw();
// 移除已完成的烟花
if (firework.exploded && firework.particles.length === 0) {
fireworks.splice(index, 1);
}
});
requestAnimationFrame(animate);
}
// 自动发射烟花
setInterval(createFirework, 1500);
// 点击发射烟花
canvas.addEventListener('click', createFirework);
// 启动动画
animate();
</script>
</body>
</html>
这个烟花效果包含以下特点：
- 自动发射：每1.5秒自动发射一个烟花
- 点击发射：点击画布任意位置可手动发射烟花
- 物理效果：
- 烟花弹道的抛物线运动
- 爆炸粒子的重力模拟
- 空气阻力效果
- 视觉效果：
- 随机颜色生成（HSL色彩模式）
- 渐隐粒子效果
- 轨迹光点效果
- 性能优化：
- 自动清理已完成粒子
- 使用requestAnimationFrame windows优化大师/ 实现流畅动画
使用时只需将代码保存为.html文件并用浏览器打开即可。可以通过调整以下参数自定义效果：
gravity：控制粒子下落速度friction：控制空气阻力大小setInterval的时间间隔：控制自动发射频率- 爆炸时的粒子数量（代码中的100）
- 粒子的初始速度和大小范围
你可以根据需求进一步添加以下功能：
- 调整颜色渐变模式
- 添加音效
- 增加更多粒子效果（如尾迹、闪光）
- 实现不同形状的烟花图案
- 添加背景星空效果
本文标签： html制作一个放烟花动画的网页代码
版权声明：本文标题：html制作一个放烟花动画的网页代码 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1747558866a2708365.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论