3d烟火效果—代码示例

温馨提示：这篇文章已超过230天没有更新，请注意相关的内容是否还可用！

标题：3D烟火效果—代码示例

我将向大家介绍一种令人惊叹的3D烟火效果，并提供相应的代码示例。通过这个示例，您将学习如何使用网页代码创建逼真的烟火效果，为您的网页增添一份视觉上的震撼。

我们需要创建一个HTML画布，用于显示烟火效果。以下是一个基本的HTML结构示例：


<!DOCTYPE html>
<html>
<head>
    <title>3D烟火效果</title>
    <style>
        canvas {
            background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="fireworksCanvas"></canvas>
</body>
</html>

接下来，我们将使用JavaScript来实现烟火效果。我们将使用HTML5的Canvas API来绘制烟火，并使用requestAnimationFrame函数来更新画布。以下是示例代码：


const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
// 设置画布尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 创建一个烟花类
class Firework {
    constructor() {
        this.x = Math.random() * canvas.width;
        this.y = canvas.height;
        this.vx = Math.random() * 2 - 1;
        this.vy = Math.random() * -5 - 4;
        this.gravity = 0.1;
        this.alpha = 1;
        this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
    }
    update() {
        this.x += this.vx;
        this.y += this.vy;
        this.vy += this.gravity;
        this.alpha -= 0.01;
        ctx.beginPath();
        ctx.arc(this.x, this.y, 3, 0, Math.PI * 2, false);
        ctx.fillStyle = this.color;
        ctx.globalAlpha = this.alpha;
        ctx.fill();
    }
}
// 创建一个烟花数组
const fireworks = [];
// 在画布上绘制烟花
function drawFireworks() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < fireworks.length; i++) {
        fireworks[i].update();
        if (fireworks[i].alpha <= 0) {
            fireworks.splice(i, 1);
        }
    }
    requestAnimationFrame(drawFireworks);
}
// 创建新的烟花并添加到数组中
function createFirework() {
    fireworks.push(new Firework());
}
// 监听鼠标点击事件，并触发烟花效果
canvas.addEventListener('click', createFirework);
// 初始化烟花效果
drawFireworks();