用 JavaScript 打造网页烟花秀：趣味互动功能开发

最新推荐文章于 2025-06-05 21:40:57 发布

妮在想什么

最新推荐文章于 2025-06-05 21:40:57 发布

阅读量263

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/BANaanaa/article/details/146678244

版权

引言

在网页开发的世界里，创意与技术的结合总能碰撞出奇妙的火花。今天，我们就一起探索如何使用 JavaScript 创建一个超有趣的互动小功能 —— 当用户点击网页时，绽放出绚丽多彩的烟花效果。这个功能不仅能为网页增添趣味性，还能让我们深入了解 JavaScript 在图形绘制和动画效果方面的强大能力。

技术搭建：HTML 与 CSS 基础

整个项目以 HTML 和 CSS 为基石。HTML 负责搭建基本的页面结构，我们创建一个<canvas>元素。<canvas>就像是一块空白画布，为 JavaScript 绘制烟花提供了舞台。CSS 则用于设置页面的背景颜色为黑色，营造出烟花在夜空绽放的氛围。

html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>点击生成烟花效果</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #000;
    }
  </style>
</head>

<body>
</body>

</html>

JavaScript 核心逻辑解析

获取页面尺寸与初始化画布

首先，通过window.innerWidth和window.innerHeight获取页面的宽度和高度，以此设置<canvas>的尺寸，确保画布覆盖整个页面。

javascript

const width = window.innerWidth;
const height = window.innerHeight;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');

烟花粒子类：Particle

Particle类定义了烟花的基本组成部分 —— 粒子。每个粒子都有初始位置、速度、大小和随机颜色。update方法负责更新粒子的位置和大小，使其逐渐变小；draw方法则在画布上绘制粒子。

javascript

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = (Math.random() - 0.5) * 10;
    this.vy = (Math.random() - 0.5) * 10;
    this.size = Math.random() * 3 + 1;
    this.color = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.size *= 0.98;
    if (this.size < 0.1) {
      return false;
    }
    return true;
  }

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

烟花类：Firework

Firework类将多个粒子组合成一个烟花。它通过numParticles确定每个烟花包含的粒子数量，并在初始化时创建这些粒子。update方法判断烟花是否结束，draw方法绘制整个烟花。

javascript

class Firework {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.particles = [];
    const numParticles = Math.floor(Math.random() * 50) + 30;
    for (let i = 0; i < numParticles; i++) {
      this.particles.push(new Particle(x, y));
    }
  }

  update() {
    let allDead = true;
    for (let i = this.particles.length - 1; i >= 0; i--) {
      if (this.particles[i].update()) {
        allDead = false;
      } else {
        this.particles.splice(i, 1);
      }
    }
    return allDead;
  }

  draw() {
    for (const particle of this.particles) {
      particle.draw();
    }
  }
}

事件响应与动画循环

为<canvas>添加点击事件监听器，当用户点击页面时，在点击位置创建一个新的烟花。animate函数使用requestAnimationFrame实现动画循环，不断更新和绘制烟花，让烟花效果动起来。

javascript

let fireworks = [];
canvas.addEventListener('click', (e) => {
  const x = e.offsetX;
  const y = e.offsetY;
  fireworks.push(new Firework(x, y));
});

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

  for (let i = fireworks.length - 1; i >= 0; i--) {
    if (fireworks[i].update()) {
      fireworks.splice(i, 1);
    } else {
      fireworks[i].draw();
    }
  }
}

animate();