粒子特效生成器 - Canvas粒子动画代码

粒子系统（Particle System）

粒子系统是一种用于模拟大量微小个体（即粒子）集体行为的计算机图形学技术。每个粒子作为一个独立的图形元素，拥有自己的位置、速度、加速度、颜色、大小、生命周期等属性。通过对每个粒子单独更新状态并渲染，可以模拟出火焰、烟雾、雨雪、爆炸等复杂自然现象。粒子特效生成器的核心就是一个简化版的粒子系统实现。

Canvas 2D

HTML5 Canvas 2D是浏览器提供的2D图形绘制API，通过JavaScript脚本可以在网页上动态绘制图形、图像和动画。Canvas元素提供了一个位图绘制区域，开发者可以通过getContext('2d')获取2D渲染上下文，使用其提供的方法绘制矩形、圆形、路径、线条、文字等图形。粒子特效生成器的所有渲染工作均基于Canvas 2D API完成。

requestAnimationFrame

requestAnimationFrame是浏览器提供的动画帧调度API，它会在浏览器下一次重绘之前调用指定的回调函数。相比setInterval或setTimeout，requestAnimationFrame具有多项优势：它会自动匹配显示器的刷新率（通常60fps），在页面不可见时自动暂停以节省资源，并且提供更精确的帧间时间控制。粒子特效生成器使用requestAnimationFrame作为动画循环的驱动力。

欧氏距离（Euclidean Distance）

欧氏距离是计算两个点之间直线距离的数学公式。在二维平面上，两点(x1,y1)和(x2,y2)之间的欧氏距离为√((x2-x1)²+(y2-y1)²)。粒子特效生成器中的连线功能使用欧氏距离判断两个粒子是否在连线距离阈值内，鼠标交互功能也使用欧氏距离计算鼠标与粒子之间的距离以确定作用力的大小。

透明度（Alpha/Opacity）

透明度描述了一个图形元素的不透明程度。在RGBA颜色模型中，Alpha通道取值范围为0到1，0表示完全透明，1表示完全不透明。粒子特效生成器中的透明度参数包括粒子透明度和连线透明度两个维度，通过调节这两个参数可以控制粒子效果的层次感和含蓄度。较低的透明度使粒子更加含蓄，较高的透明度使粒子更加醒目。

帧率（FPS - Frames Per Second）

帧率指每秒钟渲染的画面帧数，是衡量动画流畅度的重要指标。60fps意味着每秒渲染60帧，对应约16.67毫秒的帧间隔，能够提供流畅的视觉体验。30fps虽然画面流畅度有所降低，但在大多数场景下仍可接受。低于24fps时人眼会明显感知到卡顿。粒子特效生成器内置FPS监测功能，帮助用户评估当前参数配置下的渲染性能。

向量运算

向量是有方向和大小的量，在粒子动画中常用于表示速度、加速度和力。每个粒子的速度通常用一个二维向量(vx, vy)表示，分别对应水平方向和垂直方向的分量。通过向量的加法可以实现力的叠加，通过向量的归一化可以得到方向信息。粒子特效生成器中的粒子运动和鼠标交互均基于向量运算实现。

动画循环（Animation Loop）

动画循环是持续重复执行的渲染过程，每一帧都包含清除画布、更新所有粒子状态（位置、颜色、透明度等）和重新绘制三个步骤。这种循环调用形成了人眼所见的连续动画效果。典型的实现方式是在requestAnimationFrame的回调函数中递归调用自身，形成无限循环。粒子特效生成器的动画循环还包含了FPS计算、连线检测和鼠标交互处理。

渐变（Gradient）

渐变是指颜色在空间或时间上的平滑过渡。粒子特效生成器中的双色渐变功能实现了时间维度上的颜色过渡：每个粒子在诞生时呈现起始颜色，在整个生命周期中逐渐过渡到结束颜色。Canvas API提供了createLinearGradient和createRadialGradient方法来创建空间渐变，而粒子系统中的颜色渐变通常在JavaScript代码中通过线性插值（lerp）计算实现。

性能优化

性能优化是在保证视觉效果的前提下提升渲染效率的技术手段。粒子系统中常见的优化策略包括：限制粒子数量避免过多的绘制调用；使用对象池复用粒子对象减少内存分配和垃圾回收；简化粒子的更新逻辑减少每帧的计算量；合理设置Canvas尺寸避免过大的像素操作；利用Canvas的save/restore机制减少不必要的状态切换。粒子特效生成器导出的代码在默认参数下已进行了合理的性能平衡。