UD5工具箱
什么是 Particles.js？它能做什么？
Particles.js 是一款轻量级的开源 JavaScript 粒子动画库，基于 HTML5 Canvas 技术实现在网页上创建粒子背景效果。它可以生成各种形状（圆形、方形、三角形、星形等）的粒子，并支持自定义颜色、大小、速度、运动方向等参数。粒子之间可以产生连线效果，还可以响应鼠标悬停和点击操作。本配置生成器为您提供了一个可视化的操作界面，让您无需手写 JSON 配置代码即可快速生成专业的粒子效果。
如何将 Particles.js 添加到网站？
首先通过 CDN 或 npm 引入 particles.js 库，然后在页面中创建一个容器元素（如 div#particles-js），接着准备一个 JSON 格式的配置文件，最后调用 particlesJS.load() 方法初始化粒子效果。使用本工具的配置生成器，您可以省去手动编写 JSON 的步骤——在可视化界面中调整好各项参数后，点击复制配置按钮即可获得完整的 JSON 配置代码，直接粘贴到项目中使用。整个过程无需任何编程知识。
能否在一页上使用多个粒子实例？
可以。Particles.js 支持在同一页面上创建多个独立的粒子实例，每个实例可以拥有不同的容器元素和配置参数。例如，您可以让页面头部和底部使用不同的粒子效果。需要注意的是，每个粒子实例都会占用一定的浏览器渲染资源，因此建议合理控制实例数量和每个实例的粒子数量，以确保页面整体性能。在使用本工具生成配置时，您可以为每个实例分别导出不同的 JSON 配置文件。
如何改变粒子颜色和形状？
在本配置生成器的界面中，颜色和形状设置位于配置面板的显眼位置。形状设置提供 Circle、Square、Triangle、Polygon、Star 五种选项，选择 Polygon 或 Star 时还可以进一步设置边数或角数。颜色设置支持两种模式：单色模式下您可以指定一种固定颜色；调色板模式下您可以添加多种颜色，每个粒子会随机从中选取一种。此外，您还可以设置粒子描边颜色、描边宽度以及背景颜色，实现更丰富的视觉组合。
如何让粒子与鼠标交互？
在配置生成器的交互设置区域，您可以分别配置悬停效果和点击效果。悬停效果支持 Grab（粒子与鼠标连线）、Bubble（粒子膨胀）和 Repulse（粒子被推开）三种模式。点击效果支持 Push（发射新粒子）、Remove（删除粒子）、Bubble（粒子膨胀）和 Repulse（粒子被推开）四种模式。每种效果都可以独立启用或禁用。交互功能大大增强了粒子背景的趣味性和用户参与感，建议根据页面的整体设计风格选择合适的交互模式。
Particles.js 的性能影响如何？
Particles.js 的性能主要取决于粒子数量、形状复杂度和交互效果的开启情况。粒子数量越多，Canvas 的绘制负担越大，可能导致页面帧率下降。建议在移动端或性能敏感的场景下适当减少粒子数量（100-200个通常足够），并避免同时开启复杂的交互效果。使用本工具的预设效果时，Snow 和 Fireflies 等预设已经针对性能进行了优化。您还可以通过调整粒子大小和连线距离来平衡视觉效果与性能表现。
如何让粒子背景响应式？
Particles.js 内置了响应式支持。在配置中，将 retina_detect 设置为 true 可以让粒子效果自动适配高分辨率屏幕。对于容器的响应式布局，您需要确保粒子容器元素的 CSS 宽度和高度设置正确（通常设置为 100% 宽度和所需的高度）。在本工具的配置中，particles 部分的 size 参数和 move 部分的方向设置共同决定了粒子在不同尺寸屏幕上的表现。建议同时使用 CSS 媒体查询来调整容器尺寸，确保在各种设备上都有良好的视觉效果。
能否使用图片作为粒子？
是的，Particles.js 支持使用自定义图片作为粒子形状。在配置的 particles.shape.type 数组中添加 image 类型，并在 particles.shape.image 部分配置图片的 src（图片 URL）、width（图片宽度）和 height（图片高度）。在本配置生成器中，您可以在导出配置后手动添加图片相关参数。不过请注意，使用图片粒子会增加内存占用和网络请求，建议使用较小尺寸的图片，并在性能敏感的场景下谨慎使用。对于追求轻量化的项目，建议优先使用内置的形状类型。