正文

学会烟花效果，给网页增色添彩——轻松上手JavaScript烟花动画制作

/0 浏览量
0515

烟花，自古以来就是庆祝和喜庆的象征。如今，随着互联网技术的发展，我们可以在网页上重现这一美丽的景象。JavaScript作为一种强大的前端技术，可以轻松实现烟花动画的制作。本文将带你轻松上手，让你学会如何制作一个炫酷的烟花动画效果。

一、准备工作

在开始制作烟花动画之前，我们需要准备以下工具和知识：

  1. HTML：用于搭建网页的基本结构。
  2. CSS：用于美化网页，添加动画效果。
  3. JavaScript：用于实现烟花动画的逻辑和交互。

二、HTML结构

首先，我们需要搭建一个简单的HTML结构，用于承载烟花动画。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>烟花动画</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <canvas id="fireworks"></canvas>
    <script src="script.js"></script>
</body>
</html>

三、CSS样式

接下来，我们需要为烟花动画添加一些基本的样式。

body, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

canvas {
    display: block;
    background-color: #000;
}

四、JavaScript逻辑

现在，我们来编写JavaScript代码，实现烟花动画的核心逻辑。

// 获取canvas元素
const canvas = document.getElementById('fireworks');
const ctx = canvas.getContext('2d');

// 设置canvas尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 烟花类
class Firework {
    constructor(x, y, targetX, targetY, color) {
        this.x = x;
        this.y = y;
        this.targetX = targetX;
        this.targetY = targetY;
        this.color = color;
        this.velocity = {
            x: (targetX - x) / 10,
            y: (targetY - y) / 10
        };
        this.brightness = Math.random() * 70 + 30;
        this.alpha = 1;
        this.decay = Math.random() * 0.015 + 0.005;
    }

    update() {
        this.x += this.velocity.x;
        this.y += this.velocity.y;
        this.alpha -= this.decay;
    }

    draw() {
        ctx.save();
        ctx.globalAlpha = this.alpha;
        ctx.beginPath();
        ctx.arc(this.x, this.y, 2, 0, Math.PI * 2, false);
        ctx.fillStyle = `hsl(${this.color}, 100%, ${this.brightness}%)`;
        ctx.fill();
        ctx.restore();
    }
}

// 烟花数组
let fireworks = [];

// 创建烟花
function createFirework() {
    const x = Math.random() * canvas.width;
    const y = Math.random() * canvas.height;
    const targetX = Math.random() * canvas.width;
    const targetY = Math.random() * canvas.height;
    const color = Math.random() * 360;
    fireworks.push(new Firework(x, y, targetX, targetY, color));
}

// 更新烟花
function updateFireworks() {
    for (let i = fireworks.length - 1; i >= 0; i--) {
        fireworks[i].update();
        fireworks[i].draw();
        if (fireworks[i].alpha <= 0) {
            fireworks.splice(i, 1);
        }
    }
}

// 绘制烟花
function drawFireworks() {
    requestAnimationFrame(drawFireworks);
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    updateFireworks();
}

// 初始化
function init() {
    drawFireworks();
    setInterval(createFirework, 50);
}

init();

五、总结

通过以上步骤，我们成功制作了一个简单的烟花动画效果。当然，这只是一个基础版本，你可以根据自己的需求进行修改和优化。例如，可以添加更多的烟花类型、颜色和动画效果，使网页更加炫酷。

希望本文能帮助你轻松上手JavaScript烟花动画制作，让你的网页增色添彩！

-- 展开阅读全文 --