原生JS实现烟花效果

原生JS实现烟花效果的完整攻略如下。

准备工作

首先需要在HTML中创建一个画布Canvas元素，并且需要设置Canvas的宽高以及背景颜色。代码如下：

<canvas id="fireworks"></canvas>

#fireworks {
    width: 100%;
    height: 100%;
    background-color: #111;
}

然后需要在JS中获取Canvas对象和绘制上下文，并设置Canvas的宽高，以便使Canvas适应不同设备的屏幕分辨率。代码如下：

const canvas = document.querySelector('#fireworks');
const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;

创建烟花

接下来需要创建一个烟花对象，其中包含了烟花的起点、终点、颜色等信息。首先需要定义起点的位置，可以随机生成一个在Canvas中的位置，代码如下：

let particle = {
    x: Math.random() * width,
    y: height,
    color: randomColor(),
    radius: 3,
    speed: 4,
    angle: Math.atan2(height, width) + (Math.random() * Math.PI - Math.PI / 2),
    friction: 0.99,
    gravity: 0.02,
    opacity: 1
};

然后需要定义终点的位置，可以设置一个目标位置，烟花会向这个目标位置飞行。代码如下：

let target = {
    x: Math.random() * width,
    y: Math.random() * height / 2
};

动画效果

接下来需要为烟花创建动画效果。每一帧需要将烟花绘制到Canvas上，并且更新其位置信息，使烟花在Canvas中逐渐飞行和消失。代码如下：

function render() {
    // 清空画布
    ctx.clearRect(0, 0, width, height);

    // 绘制烟花
    ctx.beginPath();
    ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(${particle.color},${particle.opacity})`;
    ctx.fill();

    // 更新烟花位置信息
    particle.x += Math.cos(particle.angle) * particle.speed;
    particle.y -= Math.sin(particle.angle) * particle.speed;
    particle.speed *= particle.friction;
    particle.angle += Math.random() * 0.2 - 0.1;
    particle.gravity += 0.01;
    particle.y += particle.gravity;

    // 设置烟花透明度
    particle.opacity -= 0.01;

    // 当透明度小于等于0时，创建新的烟花
    if (particle.opacity <= 0) {
        createFirework();
    }

    // 请求动画帧
    requestAnimationFrame(render);
}

创建多个烟花

可以在Canvas点击事件中创建多个烟花，让烟花的起点随机分布在点击位置附近。代码如下：

canvas.addEventListener('click', function() {
    for (let i = 0; i < 5; i++) {
        createFirework(event.clientX, event.clientY);
    }
});

示例说明

示例1

在页面加载完成后，自动创建一个烟花，烟花的颜色为红色。

document.addEventListener('DOMContentLoaded', function() {
    createFirework(null, null, '255,0,0');
});

function createFirework(x, y, color) {
    let particle = {
        x: x || Math.random() * width,
        y: y || height,
        color: color || randomColor(),
        radius: 3,
        speed: 4,
        angle: Math.atan2(height, width) + (Math.random() * Math.PI - Math.PI / 2),
        friction: 0.99,
        gravity: 0.02,
        opacity: 1
    };

    let target = {
        x: Math.random() * width,
        y: Math.random() * height / 2
    };

    render();

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

        ctx.beginPath();
        ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${particle.color},${particle.opacity})`;
        ctx.fill();

        particle.x += Math.cos(particle.angle) * particle.speed;
        particle.y -= Math.sin(particle.angle) * particle.speed;
        particle.speed *= particle.friction;
        particle.angle += Math.random() * 0.2 - 0.1;
        particle.gravity += 0.01;
        particle.y += particle.gravity;

        particle.opacity -= 0.01;

        if (particle.opacity <= 0) {
            return;
        }

        requestAnimationFrame(render);
    }
}

示例2

每隔2秒自动在Canvas中随机生成3个烟花。

setInterval(function() {
    for (let i = 0; i < 3; i++) {
        createFirework();
    }
}, 2000);

function createFirework(x, y, color) {
    let particle = {
        x: x || Math.random() * width,
        y: y || height,
        color: color || randomColor(),
        radius: 3,
        speed: 4,
        angle: Math.atan2(height, width) + (Math.random() * Math.PI - Math.PI / 2),
        friction: 0.99,
        gravity: 0.02,
        opacity: 1
    };

    let target = {
        x: Math.random() * width,
        y: Math.random() * height / 2
    };

    render();

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

        ctx.beginPath();
        ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${particle.color},${particle.opacity})`;
        ctx.fill();

        particle.x += Math.cos(particle.angle) * particle.speed;
        particle.y -= Math.sin(particle.angle) * particle.speed;
        particle.speed *= particle.friction;
        particle.angle += Math.random() * 0.2 - 0.1;
        particle.gravity += 0.01;
        particle.y += particle.gravity;

        particle.opacity -= 0.01;

        if (particle.opacity <= 0) {
            return;
        }

        requestAnimationFrame(render);
    }
}