UD5工具箱
星空粒子背景代码生成器 - 连线动态特效
生成深邃宇宙风格的粒子背景代码，粒子间近距离自动连线，适合科技感网页。
预设效果
粒子数: 150
150
3px
1.0
0.85
连线距离
150px
连线透明度
0.3
影响范围
180px
#0a0a14
常见问题与知识点
什么是Canvas粒子特效？
Canvas粒子特效是利用HTML5 Canvas API在网页上实时渲染大量微小图形（粒子），通过控制每个粒子的位置、速度、颜色、大小等属性，结合动画循环（requestAnimationFrame）创造出动态的视觉效果。粒子之间还可以通过连线、吸引、排斥等交互产生更丰富的视觉层次，广泛应用于网站背景、数据可视化、游戏开发等场景。
如何优化Canvas粒子动画的性能？
优化技巧包括：①使用requestAnimationFrame代替setInterval；②减少每帧的计算量，用距离平方比较代替开方运算；③粒子数量控制在合理范围（一般200以内可在移动端流畅运行）；④使用离屏Canvas缓存静态元素；⑤在粒子连线时设置距离阈值，超过阈值不绘制；⑥避免在循环内创建新对象；⑦使用devicePixelRatio适配时注意性能取舍。
如何将生成的粒子特效嵌入到我的网站中？
点击"导出代码"按钮即可获得完整的HTML/JavaScript代码片段。你可以将代码直接嵌入网页的任意位置，或者将其中的JavaScript部分提取出来放在独立的.js文件中引用。Canvas会自动适应其父容器的大小，因此只需确保父容器有明确的宽高即可。
粒子特效适合用作网站背景吗？
非常适合！粒子特效是流行的网站背景方案之一。使用时建议：设置较低透明度避免影响内容阅读；粒子数量适中（80-150个）；使用柔和的颜色主题；将Canvas置于背景层（z-index较低）；考虑移动端性能适当减少粒子数量。像星空、极光等主题特别适合科技类、创意类网站。
什么是requestAnimationFrame？为什么用它做动画？
requestAnimationFrame是浏览器提供的专门用于动画的API，它会在浏览器下一次重绘之前调用指定的回调函数。相比setInterval，它的优势在于：①自动匹配显示器刷新率（通常60fps），避免无效绘制；②页面不可见时自动暂停，节省资源；③与浏览器渲染周期同步，动画更流畅；④在性能较差的设备上自动降低帧率。
粒子的"吸引"和"排斥"交互是如何实现的？
当鼠标在Canvas上移动时，系统会计算每个粒子与鼠标位置的距离。在"吸引"模式下，粒子会受到一个指向鼠标的力，距离越近力越大；在"排斥"模式下则相反，粒子被推离鼠标；"环绕"模式则给粒子施加切向力，使其围绕鼠标旋转。这些力通过修改粒子的速度向量来实现，配合影响范围和力度参数可以调节交互的强度。
浮雕效果生成器 - 照片转浮雕Canvas处理
将图片处理为浮雕效果，模拟雕刻凸起感，可调光线方向以控制凹凸视觉。
数字滚动动画生成器 - 递增计数特效
生成从0滚到目标数字的动画，可调节速度和延迟，复制HTML/JS代码。
吃豆人Canvas经典版 - 网页重制原始迷宫
使用Canvas绘制的经典吃豆人游戏，包含鬼魂AI与经典音效，致敬怀旧街机。
图像炭笔画效果生成 - 粗糙线条与颗粒感
结合对比度拉伸和强噪点纹理，将照片变为具有深色粗糙质感的炭笔素描画。
Shadow DOM 插槽演示 - slot 内容投影可视化
构建带具名插槽的 Shadow DOM，改变宿主内容观察插槽分配，学习组件组合。
随机超级英雄生成器 - 超能力与起源
产生一个包括代号、超能力、弱点和背景故事的虚构超级英雄档案。
DOM 事件传播模拟器 - 捕获与冒泡阶段可视化
构建嵌套元素，触发事件并逐步显示事件流经路径，可切换捕获/冒泡模式。
Low Poly低多边形生成器 - 图片三角化艺术效果
将图片转换为由彩色三角形构成的低多边形艺术风格，可调整三角网格密度和模糊。
自由手绘白板 - 无限画布与激光笔
使用鼠标或触控笔在无限画布上涂鸦，激光笔模式不留下痕迹，适合演示思路。
Lottie 动画在线预览器 - 加载 JSON 动画文件播放
拖入 Lottie 动画 JSON 文件，即刻播放矢量动画，支持暂停、调速、背景颜色设置。
Particles.js 配置生成器 - 粒子背景可视化定制
调整粒子数量、形状、颜色、连线等参数，实时预览粒子背景效果，导出 Particles.js 配置 JSON。
Canvas 烟花绽放动效 - 鼠标点击发射烟花
在网页画布上点击鼠标发射绚丽的粒子烟花，支持重力、拖尾和随机颜色，适合节日气氛。
面部时光穿越特效 - 模拟年轻时或年老容貌
对摄像头画面进行简单扭曲和色调改变，模拟变老或变年轻的粗略视觉效果。
互动指针特效生成器 - 鼠标光标跟随动画
选择光晕、拖尾、磁吸等风格，生成自制的JS鼠标光标特效代码。
实时万花筒特效 - 摄像头/图片镜像拼贴
利用Canvas将摄像头画面或图片实时切割并多重镜像，形成动态万花筒视觉效果。
贪吃虫大作战精简版 - 线上吃光点
在Canvas上控制一条不断增长的蠕虫吃光点，撞墙或撞到自己则结束。
鼠标拖尾效果生成 - 自定义颜色形状
配置鼠标移动时跟随的彩色拖尾粒子或图形，生成JS置入网站。
粒子背景生成器 - 星空/气泡/雪花CSS效果
选择粒子样式（星星、泡泡、花瓣等），生成用于网站背景的纯CSS或JS动画代码。
Canvas噪点纹理生成 - 可下载背景图
通过Canvas生成不同粒度、颜色的噪点纹理图片，适合用作页面背景或叠加。
鼠标轨迹特效生成 - 跟随粒子或星星
自定义鼠标移动后留下的彩色粒子或光点轨迹，生成JS与HTML集成代码。
音频波形图生成器 - 离线文件波形预览
选择本地音频文件，解绘制完整的静态波形图，便于观察响度变化。
在线刮奖卡 - Canvas涂抹刮开涂层
在Canvas上用鼠标涂抹刮开银色涂层，显示隐藏文字或图片，模拟刮刮乐。
机器人变声效果 - Web Audio 录制添加特效
录制一段音频，实时添加机器人、外星人、回声等音效并下载，不依赖服务器。
绿幕/蓝幕图片抠图 - Canvas简单色键移除背景
上传纯色背景图片，选择要去除的背景颜色和容差，替换为透明或新背景。
简单验证码生成器 - Canvas随机字符图片
生成简单数字或字母验证码图片，带干扰线和噪点，适合前端原型测试，不依赖服务端。
俄罗斯方块 - Canvas经典堆叠消除在线
实现经典俄罗斯方块，旋转、移动、加速下落，满行消除计分，纯前端Canvas操控。
Canvas触摸绘画测试 - 多点触控支持检测
在Canvas上使用触摸绘制线条，检验设备的触摸点数量和压力感应支持，辅助调试。
图片旋转工具 - 在线任意角度旋转照片
拖动滑块或精确输入角度数值，对图片进行任意角度旋转，支持自动填充背景色裁剪。
撒花特效生成器 - 在线庆祝彩带动画配置
自定义五彩纸屑数量、形状和重力，生成撒花动画代码，可直接嵌入网页完成事件触发。