粒子火圈动画特效

原创已于 2025-06-27 14:18:05 修改 · 314 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-19 17:04:18 首次发布

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>粒子火圈动画特效</title>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
}

canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="fireCanvas"></canvas>

const canvas = document.getElementById("fireCanvas");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const particles = [];
const numParticles = 300;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const fireRadius = 150;

// 火焰颜色渐变
const fireColors = ["#ff0000", "#ff4500", "#ff6347", "#ff8c00", "#ffa500", "#ffd700"];

function createParticles() {
for (let i = 0; i < numParticles; i++) {
const angle = Math.random() * 2 * Math.PI;
const radius = fireRadius * Math.sqrt(Math.random());
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);
const size = Math.random() * 2 + 1;
const speed = Math.random() * 0.05 + 0.02;
const color = fireColors[Math.floor(Math.random() * fireColors.length)];
const life = Math.random() * 100 + 50;

particles.push({
x,
y,
size,
speed,
color,
life,
maxLife: life,
angle,
radius
});
}
}

function drawParticles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < particles.length; i++) {
const p = particles[i];

// 模拟火的扭曲运动
p.angle += p.speed;
p.radius += 0.5;

p.x = centerX + p.radius * Math.cos(p.angle);
p.y = centerY + p.radius * Math.sin(p.angle);

// 消失效果
const opacity = p.life / p.maxLife;
ctx.globalAlpha = opacity;

// 创建圆形粒子
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fillStyle = p.color;
ctx.fill();

// 更新粒子生命周期
p.life -= 1;
if (p.life <= 0 || p.radius > fireRadius * 2) {
// 粒子消失后重置
const newAngle = Math.random() * 2 * Math.PI;
const newRadius = fireRadius * Math.sqrt(Math.random());
p.x = centerX + newRadius * Math.cos(newAngle);
p.y = centerY + newRadius * Math.sin(newAngle);
p.angle = newAngle;
p.radius = newRadius;
p.life = Math.random() * 100 + 50;
}
}

requestAnimationFrame(drawParticles);
}

createParticles();
drawParticles();

// 响应窗口大小变化
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
</script>
</body>
</html>