Fireworks

创作时间:

作者:

@小白创作中心

Fireworks

引用

来源

https://docs.pingcode.com/baike/3875716

本文将详细介绍如何使用JavaScript和HTML5 Canvas API创建令人惊叹的烟花效果。通过本文，你将学习到如何创建基础Canvas、定义烟花粒子、实现粒子爆炸以及添加动画效果等关键步骤。

一、基础Canvas设置

首先，我们需要在HTML页面中创建一个Canvas元素，并通过JavaScript获取这个元素的上下文。这样，我们就可以在Canvas上绘制图形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fireworks</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="fireworksCanvas"></canvas>
    <script src="fireworks.js"></script>
</body>
</html>

在上面的HTML中，我们创建了一个全屏的Canvas元素。接下来，我们在JavaScript中进行设置：

const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Resize the canvas when the window is resized
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

二、定义烟花粒子

每个烟花是由多个粒子组成的，这些粒子在爆炸时会散开。我们需要定义一个粒子类来表示这些粒子。

class Particle {
    constructor(x, y, color) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.radius = Math.random() * 2 + 1;
        this.speed = Math.random() * 5 + 2;
        this.angle = Math.random() * 2 * Math.PI;
        this.vx = Math.cos(this.angle) * this.speed;
        this.vy = Math.sin(this.angle) * this.speed;
        this.alpha = 1;
        this.decay = Math.random() * 0.03 + 0.01;
    }
    draw(ctx) {
        ctx.save();
        ctx.globalAlpha = this.alpha;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.restore();
    }
    update() {
        this.x += this.vx;
        this.y += this.vy;
        this.alpha -= this.decay;
    }
}

三、实现粒子爆炸

当烟花被触发时，我们需要生成多个粒子，并让它们从烟花的中心点向外扩散。我们可以定义一个烟花类来管理这些粒子。

class Firework {
    constructor(x, y, colors) {
        this.x = x;
        this.y = y;
        this.colors = colors;
        this.particles = [];
        this.createParticles();
    }
    createParticles() {
        for (let i = 0; i < 100; i++) {
            const color = this.colors[Math.floor(Math.random() * this.colors.length)];
            this.particles.push(new Particle(this.x, this.y, color));
        }
    }
    draw(ctx) {
        this.particles.forEach(particle => particle.draw(ctx));
    }
    update() {
        this.particles = this.particles.filter(particle => particle.alpha > 0);
        this.particles.forEach(particle => particle.update());
    }
}

四、动画效果

为了让烟花效果更加生动，我们需要使用requestAnimationFrame来实现动画效果。我们需要一个主类来管理所有的烟花，并在每一帧中更新和绘制它们。

class FireworksDisplay {
    constructor(ctx) {
        this.ctx = ctx;
        this.fireworks = [];
        this.colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#00ffff', '#ff00ff'];
        this.init();
    }
    init() {
        canvas.addEventListener('click', (e) => {
            const x = e.clientX;
            const y = e.clientY;
            this.fireworks.push(new Firework(x, y, this.colors));
        });
        this.animate();
    }
    animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        this.fireworks.forEach(firework => {
            firework.draw(this.ctx);
            firework.update();
        });
        this.fireworks = this.fireworks.filter(firework => firework.particles.length > 0);
        requestAnimationFrame(() => this.animate());
    }
}
const fireworksDisplay = new FireworksDisplay(ctx);

五、优化和改进

虽然上面的代码已经实现了基本的烟花效果，但我们可以进一步优化和改进。包括粒子数量的控制、粒子运动轨迹的调整、颜色的渐变效果等。

1. 粒子数量的控制

我们可以根据屏幕的尺寸动态调整粒子的数量，以确保在不同设备上都有良好的表现。

createParticles() {
    const numParticles = Math.min(Math.max(canvas.width * canvas.height / 50000, 50), 500);
    for (let i = 0; i < numParticles; i++) {
        const color = this.colors[Math.floor(Math.random() * this.colors.length)];
        this.particles.push(new Particle(this.x, this.y, color));
    }
}

2. 粒子运动轨迹的调整

我们可以为粒子的运动轨迹添加重力效果，使其更加逼真。

update() {
    this.vx *= 0.98;
    this.vy *= 0.98 + 0.05; // Add gravity
    this.x += this.vx;
    this.y += this.vy;
    this.alpha -= this.decay;
}

3. 颜色的渐变效果

我们可以让粒子的颜色随时间逐渐变化，使其更加绚丽。

draw(ctx) {
    ctx.save();
    ctx.globalAlpha = this.alpha;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.restore();
    this.color = `rgba(${Math.floor(255 * this.alpha)}, ${Math.floor(100 * this.alpha)}, ${Math.floor(255 * (1 - this.alpha))}, 1)`;
}