原生js怎么实现烟花

原生JS实现烟花效果的方法有多种，包括使用HTML5的

核心观点：使用canvas绘制、使用requestAnimationFrame进行动画刷新、使用粒子系统管理烟花效果。

其中，使用canvas绘制是实现烟花效果的基础。通过canvas，我们可以自由绘制各种形状、颜色的烟花粒子，并控制其运动轨迹和速度。接下来，我们将详细介绍如何通过原生JavaScript实现一个简单的烟花效果。

一、设置基础HTML结构

首先，我们需要在HTML文件中创建一个canvas元素，并设置其宽高以适应屏幕尺寸。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>烟花效果</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="fireworksCanvas"></canvas>
    <script src="fireworks.js"></script>
</body>
</html>

这里，我们将canvas的宽高设置为全屏，并引入一个JavaScript文件fireworks.js，用于编写烟花效果的实现代码。

二、初始化Canvas

在fireworks.js文件中，我们首先获取canvas元素，并设置其上下文。

const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

这样，当窗口大小发生变化时，canvas的宽高也会随之调整，确保烟花效果在任何屏幕尺寸下都能正常显示。

三、定义粒子系统

粒子系统是烟花效果的核心，通过粒子系统，我们可以管理每个烟花粒子的状态和运动轨迹。

1、粒子类

首先，我们定义一个粒子类，用于表示单个烟花粒子。

class Particle {
    constructor(x, y, color) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.size = Math.random() * 2 + 1;
        this.speedX = Math.random() * 3 - 1.5;
        this.speedY = Math.random() * 3 - 1.5;
        this.gravity = 0.05;
    }
    update() {
        this.x += this.speedX;
        this.y += this.speedY;
        this.speedY += this.gravity;
    }
    draw() {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
    }
}

每个粒子都有其位置、颜色、大小、速度和重力属性。在update方法中，我们更新粒子的位置，同时考虑重力的影响。在draw方法中，我们使用canvas的绘图API将粒子绘制到屏幕上。

2、粒子数组

接下来，我们定义一个粒子数组，用于存储所有的粒子。

let particlesArray = [];
function createParticles(x, y, color) {
    const numberOfParticles = 100;
    for (let i = 0; i < numberOfParticles; i++) {
        particlesArray.push(new Particle(x, y, color));
    }
}

在createParticles函数中，我们创建指定数量的粒子，并将其添加到粒子数组中。每个粒子的位置和颜色由参数决定。

四、动画循环

为了实现烟花的动画效果，我们需要不断更新和绘制粒子。这里我们使用requestAnimationFrame来创建一个平滑的动画循环。

1、清除画布

首先，我们需要在每次绘制之前清除画布，以避免残留的绘图。

function clearCanvas() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

通过设置透明度较低的黑色填充，我们可以创建一种拖影效果，使烟花的轨迹更加真实。

2、更新和绘制粒子

在动画循环中，我们需要更新和绘制每个粒子。

function handleParticles() {
    for (let i = 0; i < particlesArray.length; i++) {
        particlesArray[i].update();
        particlesArray[i].draw();
        // 移除超出屏幕的粒子
        if (particlesArray[i].y > canvas.height || particlesArray[i].size <= 0.2) {
            particlesArray.splice(i, 1);
            i--;
        }
    }
}

在handleParticles函数中，我们遍历粒子数组，更新和绘制每个粒子。同时，我们移除超出屏幕或尺寸过小的粒子，以保持粒子数组的性能。

3、动画循环

最后，我们定义动画循环函数，并使用requestAnimationFrame进行调用。

function animate() {
    clearCanvas();
    handleParticles();
    requestAnimationFrame(animate);
}
animate();

通过这种方式，我们可以创建一个平滑的烟花动画效果。

五、触发烟花效果

为了使烟花效果更加生动，我们可以通过点击事件来触发烟花。

canvas.addEventListener('click', (event) => {
    const x = event.clientX;
    const y = event.clientY;
    const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
    createParticles(x, y, color);
});

当用户点击屏幕时，我们获取点击位置，并生成随机颜色的烟花粒子。

六、优化与扩展

1、性能优化

在实际应用中，我们需要考虑性能问题。可以通过以下方法进行优化：

粒子回收：使用对象池技术，避免频繁创建和销毁粒子对象。
批量绘制：使用beginPath和closePath将多个粒子的绘制合并为一次操作，减少绘图调用次数。

2、效果扩展

为了使烟花效果更加丰富，可以尝试以下扩展：

不同形状的粒子：除了圆形粒子，还可以尝试绘制星形、心形等不同形状的粒子。
多种颜色和渐变效果：通过设置不同的颜色和渐变效果，使烟花更加绚丽多彩。
交互效果：添加更多的交互效果，例如鼠标拖拽生成烟花、键盘控制烟花等。

通过以上步骤，我们实现了一个简单的烟花效果。虽然代码比较基础，但通过进一步优化和扩展，可以制作出更加复杂和炫目的烟花展示。希望这篇文章对你有所帮助！