Bubbly变量使用教程：零基础轻松学会

在Bubbly气泡背景中动态调整颜色、数量或运动轨迹时，你会发现它并非直观可调——文档中没有暴露任何全局变量供直接修改。根本原因在于Bubbly的设计理念：不提供全局API，所有可配置参数均通过 bubbly() 调用时传入的对象进行封装。要实现动态效果，关键在于掌握其参数传递机制，而不是寻找某个隐式的变量声明入口。

基础启动：以对象字面量替代变量传参

初学者常直接调用 bubbly();，但这会采用全部默认参数，后续无法调整。正确做法是改用对象字面量传参，例如 bubbly({speed: 0.3, count: 80});。其中 speed 与 count 是对象的键值对，并非独立变量——你不能在别处写 speed = 0.5; 并期望气泡速度变化，必须重新调用 bubbly() 并传入新对象。

若需重复使用同一组参数，可先声明一个常量对象再传入：const bgConfig = {speed: 0.2, count: 60}; bubbly(bgConfig);。需注意一个常见误区：该对象必须在 bubbly() 调用前定义，否则会抛出 ReferenceError。

颜色动态化：通过函数返回值实现可变效果

若将气泡填充色固定为 "#ff6b6b"，则所有气泡颜色一致，视觉上缺乏层次。解决之道是让颜色“动态”起来——通过函数返回不同值，在每次绘制时生成新色彩。

一种方案是借助 Math.random() 生成随机HSLA值。在 bubbles.fill 字段中如此编写：fill: () => `hsla(${Math.random() * 30 + 10}, 90%, 70%, ${Math.random() * 0.4 + 0.1})`。每次canvas重绘时该函数都会执行，相当于创建了一个“运行时变量”。

若希望气泡颜色按序渐变而非完全随机，可通过闭包来维护状态变量：
let hueOffset = 0; bubbly({bubbles: {fill: () => {hueOffset = (hueOffset + 2) % 360; return `hsla(${hueOffset}, 100%, 60%, 0.3)`;}}});

关键要点：闭包变量 hueOffset 必须在 bubbly() 调用前声明，而非放在 fill 函数内部——否则每次调用都会被重置为0，从而丧失渐变的连续性。

响应式更新：重新调用以覆盖旧实例

Bubbly并不支持运行时直接修改参数，唯一途径是销毁后重建。具体需遵循以下三个步骤：

第一步，保存初始调用的返回值：const bubbleInstance = bubbly({speed: 0.3});

第二步，需要更新参数时，先调用 bubbleInstance.destroy() 清除旧canvas。若未销毁而直接重新调用 bubbly()，会导致两层气泡叠加，视觉上变得杂乱。

第三步，使用新参数重建：bubbleInstance = bubbly({speed: 0.6});

这三步必须严格按照顺序执行，中间不能插入DOM操作或异步等待——否则canvas可能残留或错位。从实践经验看，这是Bubbly在动态更新方面的核心约束，理解后便能更灵活地运用这个轻量库。