TypeScript新年烟花代码（附源码，趣味编程）-优快云博客

烟花燃放效果是一种极具视觉冲击力的动画效果，常用于庆祝节日、活动开场或网站特效。使用 TypeScript 和 HTML5 Canvas 实现烟花效果，不仅可以提升页面的美观度，还能通过代码的可维护性和扩展性，为开发者带来更高效的开发体验。本文将详细介绍如何使用 TypeScript 和 HTML5 Canvas 实现一个绚丽的烟花燃放效果，并探讨其在实际项目中的应用场景。

在实现过程中，我们使用了以下关键技术和库：

TypeScript：提供类型安全和代码结构化的优势。
HTML5 Canvas：利用其 2D 绘图 API 实现动态效果。
React：作为前端框架，方便组件化开发和状态管理。

技术要点

实现烟花燃放效果需要掌握以下关键技术，它们共同构成了实现这一视觉效果的基础。

1. TypeScript 语言特点及优势

TypeScript 是 JavaScript 的超集，提供了类型系统和面向对象编程的支持。它在实现烟花效果中的主要优势包括：

类型安全：通过类型注解减少运行时错误，提升代码的可维护性。
面向对象编程：支持类和接口，便于将烟花、粒子等逻辑封装为独立的模块。
工具友好：与现代开发工具（如 VS Code）集成良好，提供智能提示和代码检查功能。

2. HTML5 Canvas 2D 绘图 API

HTML5 Canvas 提供了强大的 2D 绘图能力，是实现烟花效果的核心工具。关键特性包括：

绘图上下文：通过 getContext('2d') 获取绘图上下文，支持绘制图形、文本和图像。
图形绘制：使用 arc、fillRect 等方法绘制圆形粒子和矩形建筑物。
透明度和渐变：通过 fillStyle 和 globalAlpha 控制颜色透明度，实现烟花的渐变效果。

3. 数学运算与物理模拟

烟花效果的核心是物理模拟，涉及以下数学和物理知识：

三角函数：通过 Math.cos 和 Math.sin 计算粒子的初始速度和方向，模拟烟花爆炸的向外扩散效果。
向量运算：更新粒子的位置和速度，模拟粒子的运动轨迹。
物理公式：模拟重力加速度（vy += 0.004），使粒子在垂直方向上逐渐下落。

4. 随机数生成器

随机性是烟花效果的关键，通过 Math.random() 实现以下功能：

随机生成粒子的位置、速度和颜色：使每次烟花爆炸的效果都不尽相同。
随机生成建筑物和窗户：为背景添加随机性，增强视觉效果。
随机触发烟花爆炸：每隔一段时间随机生成新的烟花，增加动态效果。

5. 动画与帧循环

动画效果的实现依赖于高效的帧循环，核心技术包括：

requestAnimationFrame：浏览器提供的 API，用于实现平滑的动画效果。它会自动根据屏幕刷新率调整帧率，确保动画的流畅性。
帧循环逻辑：在每一帧中更新粒子状态、清除画布并重新绘制，实现动态效果。

6. React 状态管理与组件化

虽然烟花效果主要依赖 Canvas 和 TypeScript，但 React 提供了组件化开发的优势：

状态管理：通过 useRef 和 useEffect 管理 Canvas 和粒子状态，避免不必要的重新渲染。
事件处理：通过 React 的事件系统（如点击事件）增强交互性，允许用户通过点击触发烟花爆炸。

通过以上技术的结合，我们能够实现一个高效、可维护且视觉效果绚丽的烟花燃放效果。

完整代码

以下是实现烟花燃放效果的完整代码：

index.tsx（主逻辑，核心）

import React, { useEffect, useRef } from 'react';

interface Building {
  x: number;
  y: number;
  width: number;
  height: number;
  windows: Array<{
    x: number;
    y: number;
    isLit: boolean;
  }>;
}

interface Particle {
  x: number;
  y: number;
  vx: number;
  vy: number;
  alpha: number;
  color: string;
  life: number;
}

const FireworkCanvas: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const particlesRef = useRef<Particle[]>([]);
  const buildingsRef = useRef<Building[]>([]);
  const animationFrameRef = useRef<number>();

  // 初始化建筑物
  const initBuildings = (canvasWidth: number, canvasHeight: number) => {
    const buildings: Building[] = [];
    const buildingCount =