如果你曾尝试在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在动态更新方面的核心约束，理解之后就能更好地驾驭这个轻量级库。
