H5 Canvas实现烟花效果

最新推荐文章于 2025-02-21 15:34:52 发布

转载最新推荐文章于 2025-02-21 15:34:52 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_39145520/article/details/144963790

文章标签：

#烟花效果

要在网页中实现烟花效果，可以使用HTML5的元素结合JavaScript进行绘制和动画。以下是一个简单的示例代码，演示如何在网页上实现基本的烟花效果。

完整示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>烟花效果示例</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="fireworksCanvas"></canvas>

// 设置画布大小
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();

const fireworks = [];
const particles = [];
const gravity = 0.05;

// 随机数函数
function random(min, max) {
return Math.random() * (max - min) + min;
}

// 烟花类
class Firework {
constructor(x, y, targetY) {
this.x = x;
this.y = y;
this.targetY = targetY;
this.speed = random(2, 4);
this.angle = Math.PI / 2;
this.velocityX = Math.cos(this.angle) * this.speed;
this.velocityY = -Math.sin(this.angle) * this.speed;
this.exploded = false;
this.color = `hsl(${Math.floor(random(0, 360))}, 100%, 50%)`;
}

update() {
this.velocityY += gravity;
this.x += this.velocityX;
this.y += this.velocityY;

if (this.velocityY >= 0) {
this.exploded = true;
this.explode();
}
}

explode() {
const particleCount = 100;
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle(this.x, this.y, this.color));
}
}

draw() {
ctx.save();
ctx.beginPath();
ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
ctx.restore();
}
}

// 粒子类
class Particle {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.speed = random(1, 5);
this.angle = random(0, Math.PI * 2);
this.velocityX = Math.cos(this.angle) * this.speed;
this.velocityY = Math.sin(this.angle) * this.speed;
this.gravity = gravity;
this.friction = 0.99;
this.lifespan = 100;
this.color = color;
}

update() {
this.velocityX *= this.friction;
this.velocityY *= this.friction;
this.velocityY += this.gravity;
this.x += this.velocityX;
this.y += this.velocityY;
this.lifespan -= 2;
}

draw() {
ctx.save();
ctx.globalAlpha = this.lifespan / 100;
ctx.beginPath();
ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
ctx.restore();
}
}

// 创建新的烟花
function createFirework() {
const x = random(100, canvas.width - 100);
const y = canvas.height;
const targetY = random(50, canvas.height / 2);
fireworks.push(new Firework(x, y, targetY));
}

// 动画循环
function animate() {
requestAnimationFrame(animate);
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 更新和绘制烟花
for (let i = fireworks.length - 1; i >= 0; i--) {
fireworks[i].update();
fireworks[i].draw();
if (fireworks[i].exploded) {
fireworks.splice(i, 1);
}
}

// 更新和绘制粒子
for (let i = particles.length - 1; i >= 0; i--) {
particles[i].update();
particles[i].draw();
if (particles[i].lifespan <= 0) {
particles.splice(i, 1);
}
}

// 定时创建烟花
if (Math.random() < 0.02) {
createFirework();
}
}

animate();
</script>
</body>
</html>