UD5工具箱
Canvas 画布
Canvas是HTML5标准中引入的一个网页元素标签，它提供了一个可以通过JavaScript进行2D或3D图形绘制的区域。在撒花按钮配置器中，Canvas元素被用作纸屑动画的渲染载体。所有的纸屑粒子都在这个画布上绘制和运动，通过逐帧更新每个粒子的位置、旋转和颜色来实现流畅的动画效果。Canvas具有优秀的渲染性能，能够同时处理数百个粒子的实时计算和绘制，是实现网页粒子动画的理想技术方案。
粒子系统
粒子系统是一种用于模拟大量微观对象集体行为的计算机图形学技术。在撒花效果中，每个纸屑都是一个独立的粒子对象，拥有自己的位置坐标、速度向量、旋转角度、颜色值和生命周期等属性。粒子系统通过统一的规则管理所有粒子的运动和消亡过程，包括初始状态的随机化、每帧的物理更新以及超出生命周期后的回收处理。这种基于粒子的建模方式能够以较低的计算成本创造出丰富而自然的群体动画效果。
重力加速度
重力加速度是控制纸屑粒子在垂直方向上下落速率的物理参数。在真实的物理世界中，物体受到重力作用会产生向下的加速度。撒花配置器中的重力参数模拟了这一效果，使得纸屑在上升到最高点后能够自然下落。重力值设置越大，纸屑下落的速度越快，整个动画持续时间越短。将重力设为零时，纸屑会匀速直线运动不会下落。设置为负值则会让纸屑持续向上飘浮，产生反重力的特殊效果。
发射角度
发射角度决定了纸屑粒子从发射点喷射出去的初始方向。在配置器中，角度以度数为单位进行设置，其中90度表示垂直向上发射，0度表示水平向左发射，180度表示水平向右发射。通过调整发射角度，可以改变纸屑的主要飞散方向。例如设置为45度时纸屑会向左上方飞出，设置为135度时纸屑会向右上方飞出。发射角度与扩散范围配合使用，共同决定了纸屑的空间分布形态。合理的角度设置能让撒花效果与页面布局更加协调。
扩散范围
扩散范围参数控制纸屑粒子在发射后向两侧散开的角度大小。它以发射角度为中心线，向左右两侧各扩展一定角度形成一个扇形区域。扩散范围越大，纸屑分布越分散，视觉效果越开阔。扩散范围较小时，纸屑会集中在发射方向的狭窄区域内飞行，形成集中的喷射效果。将扩散范围设为360度时，纸屑会向所有方向均匀散开形成环形爆炸效果。这个参数与发射角度的组合使用，能够创造出多种不同的纸屑喷射形态。
漂移风力
漂移风力是一个模拟自然风吹效果的水平方向力参数。它为每个纸屑粒子在水平方向上添加一个持续的加速度，使纸屑在飞行过程中产生横向的飘动偏移。正值风力让纸屑向右飘动，负值则让纸屑向左飘动。风力的加入让纸屑运动轨迹不再是简单的抛物线，而是呈现出更加自然和随机的飘落姿态。风力值不宜设置过大，否则纸屑会快速飘出画布边界，影响视觉效果的完整性。适当的小幅风力能显著提升撒花动画的真实感和观赏性。
初始速度
初始速度决定了纸屑粒子在发射瞬间的运动速率。它直接影响纸屑能够飞行的最大距离和到达的最高位置。初始速度越大，纸屑飞出时的动能越强，能够到达更高的位置和更远的水平距离。初始速度较小时，纸屑会在发射点附近小范围运动。在实际应用中，初始速度需要与重力参数配合调整，较高速度配合适度重力可以产生高远的喷射效果，较低速度配合小重力则产生柔和的飘落效果。初始速度的单位为像素每秒，具体数值的视觉效果还会受到帧率的影响。
嵌入代码
嵌入代码是配置器最终生成的一段可以直接粘贴到网页HTML中使用的代码片段。这段代码包含必要的HTML元素结构和JavaScript逻辑，能够独立运行撒花按钮功能而无需额外的配置步骤。生成的嵌入代码采用模块化设计，内部变量和函数使用命名空间隔离，避免与页面中其他脚本产生命名冲突。代码通过异步方式加载canvas-confetti依赖库，不会阻塞页面的首次渲染。嵌入代码还包含了基本的错误处理机制，在依赖库加载失败时会进行优雅降级而不会导致页面报错。