用 HTML5 Canvas 和 JavaScript 实现炫酷跨年烟花特效

news2025/1/10 21:58:05

一、引言

跨年夜，五彩斑斓、绚丽绽放的烟花是最令人期待的视觉盛宴之一。在网页端，我们能否通过技术手段复现这一梦幻场景呢？答案是肯定的。本文将深入剖析一段使用 HTML5 Canvas 和 JavaScript 实现的跨年烟花特效源码，带你领略前端技术创造的惊艳画面。

二、整体架构分析

1，HTML 结构

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

<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;
            height: 100%;
            background-color: black;
            /* 设置背景颜色为黑色 */
        }
        
        canvas {
     
            display: block;
            /* 确保canvas元素以块级元素显示 */
        }
    </style>
</head>

<body>
    <canvas id="fireworks"></canvas>
    <!-- 创建一个canvas元素用于绘制烟花 -->
</body>

</html>

页面十分简洁，核心是一个 id 为 fireworks 的元素，它就是我们绘制烟花的 “画布”。通过 JavaScript 代码将 canvas.width 和 canvas.height 设置为窗口的宽度和高度，使得烟花展示区域能自适应屏幕大小。同时，在 CSS 中把 body 和 html 的背景色设为黑色，隐藏溢出内容，以此营造出夜空般的氛围。

2，JavaScript 核心逻辑

代码主要围绕两个关键类 Firework 和 Particle 展开，以及一个动画函数 animate。fireworks 数组用于存储烟花对象，particles 数组用于存储烟花爆炸后产生的粒子对象。

三、Firework 类详解

1，构造函数

class Firework {
   
    constructor() {
   
        this.x = Math.random() * canvas.width; // 随机设置烟花的初始x坐标
        this.y = canvas.height; // 设置烟花的初始y坐标为画布底部
        this.targetY = Math