js实现炫酷的烟花效果

下面是js实现炫酷的烟花效果的完整攻略。

1. 前置条件

在实现炫酷的烟花效果之前，需要对以下技术有一定的掌握：

HTML5 Canvas: 用于绘制图形，实现动态效果的关键。
JavaScript: 用于编写控制动画效果的脚本。
CSS3: 用于设置页面布局、动画过渡效果等。

2. 基本思路

实现炫酷的烟花效果，需要基于以下两个基本思路：

生成随机颜色的烟花：烟花是由一连串的圆点组成，这些圆点需要根据一定的算法（算法详见下面示例）生成随机位置、随机大小、随机颜色。通过定时器控制每个圆点的位置和大小，最终形成一个不断扩散、变化颜色的烟花效果。
实现爆炸动画：当烟花的圆点数量达到一定程度时，就需要开始执行烟花的爆炸动画。在爆炸时，将会有一些新的组成元素出现，如光芒、火花等。这些元素还需要根据一定的算法定时更新其位置、大小和透明度等属性，最终形成烟花的完整爆炸动画。

3. 示例分析

下面，我们来分析两个示例，其中一个是生成随机颜色的烟花，另一个是烟花的爆炸动画。

示例一：生成一个随机颜色的烟花

<canvas id="myCanvas"></canvas>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const W = canvas.width = window.innerWidth;
const H = canvas.height = window.innerHeight;

const maxRadius = 100;
const minRadius = 10;

function random(min, max) {
    return Math.random() * (max - min) + min;
}

function generateFireworks() {
    const centerX = random(0, W);
    const centerY = random(0, H);

    const particleCount = random(50, 100);
    const speed = random(2, 6);

    for (let i = 0; i < particleCount; i++) {
        const angle = random(0, Math.PI * 2);
        const radius = random(minRadius, maxRadius);

        const vx = Math.cos(angle) * radius * speed;
        const vy = Math.sin(angle) * radius * speed;

        const color = `rgb(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)})`;

        drawParticle(centerX, centerY, vx, vy, color);
    }
}

function drawParticle(x, y, vx, vy, color) {
    ctx.beginPath();
    ctx.arc(x, y, minRadius, 0, Math.PI * 2);
    ctx.fillStyle = color;
    ctx.fill();

    const gradient = ctx.createRadialGradient(x, y, minRadius, x, y, maxRadius);
    gradient.addColorStop(0, color);
    gradient.addColorStop(1, 'rgba(0,0,0,0)');
    ctx.arc(x, y, maxRadius, 0, Math.PI * 2);
    ctx.fillStyle = gradient;
    ctx.fill();
}

const intervalId = setInterval(function() {
    ctx.fillStyle = 'rgba(0,0,0,0.2)';
    ctx.fillRect(0, 0, W, H);

    generateFireworks();
}, 1000);

该示例的主要作用就是生成随机颜色的烟花效果。主要的实现原理在函数generateFireworks中，其过程大致如下：

随机生成烟花的中心位置、颗粒数量和速度；
循环生成每个颗粒的位置、速度、颜色等属性，并在每一次循环中调用drawParticle方法完成对这个颗粒的绘制；
drawParticle方法主要是绘制这个颗粒的圆点，并通过createRadialGradient方法画出一个同心圆渐变的效果。

示例二：烟花的完整爆炸动画

<canvas id="myCanvas"></canvas>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const W = canvas.width = window.innerWidth;
const H = canvas.height = window.innerHeight;

const maxRadius = 100;
const minRadius = 10;
const maxParticleCount = 100;
const maxExplosionRadius = 500;

function random(min, max) {
    return Math.random() * (max - min) + min;
}

class ExplodingParticle {
    constructor(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;

        this.vx = random(-5, 5);
        this.vy = random(-5, 5);
        this.alpha = 1;
        this.decay = random(0.015, 0.03);
    }

    update() {
        this.vx *= 0.97;
        this.vy *= 0.97;
        this.x += this.vx;
        this.y += this.vy;
        this.alpha -= this.decay;
    }

    draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.globalAlpha = this.alpha;
        ctx.fill();
    }

    get isDead() {
        return this.alpha < 0.01;
    }
}

function createExplosion(x, y, color) {
    const particles = [];

    for (let i = 0; i < maxParticleCount; i++) {
        const radius = random(0, 10);
        particles.push(new ExplodingParticle(x, y, radius, color));
    }

    return particles;
}

const explosions = [];

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

        for (let j = 0; j < particles.length; j++) {
            particles[j].update();
            particles[j].draw();
        }

        if (particles[0].alpha < 0.05) {
            explosions.splice(i, 1);
            i--;
        }
    }
}

function generateExplosions() {
    const x = random(maxExplosionRadius, W - maxExplosionRadius);
    const y = random(maxExplosionRadius, H - maxExplosionRadius);
    const color = `rgb(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)})`;

    const particles = createExplosion(x, y, color);
    explosions.push(particles);
}

const intervalId = setInterval(function() {
    ctx.fillStyle = 'rgba(0,0,0,0.2)';
    ctx.fillRect(0, 0, W, H);

    generateExplosions();
    updateExplosions();
}, 1000);

该示例实现了一种完整的烟花爆炸效果，包括了火花的飞溅、光芒的闪烁等特性。其主要处理过程在ExplodingParticle和createExplosion这两个函数中，具体步骤如下：