# canvas-colorful-bubble

### 说明

五彩缤纷的气泡飘动插件, 可以用作博客背景.

### 演示

{% embed url="<https://codesandbox.io/s/canvascolorfulbubble-gug75>" %}

### 源码

<https://github.com/ddzy/ts-utility-plugins/tree/master/src/ddzy/canvas/colorful-bubble>

### 配置

| Name              | Type                         | Description | Required |
| ----------------- | ---------------------------- | ----------- | -------- |
| container         | string                       | 挂载到的 DOM 容器 | false    |
| cvsWidth          | number                       | 画布的宽        | false    |
| cvsHeight         | number                       | 画布的高        | false    |
| cvsBgColor        | string                       | 画布的背景颜色     | false    |
| bubbleNum         | number                       | 生成气泡的数量     | false    |
| bubbleScaleRange  | { min: number, max: number } | 气泡半径的范围     | false    |
| bubbleExpandRange | number                       | 气泡伸缩半径的最大值  | false    |
| bubbleOpacity     | number                       | 气泡透明度       | false    |
| bubbleSpeed       | number                       | 气泡移动速度      | false    |
| allowMouse        | boolean                      | 是否开启鼠标放置效果  | false    |
| bubbleColorArr    | string\[]                    | 气泡颜色        | false    |