canvas-colorful-bubble

canvas多彩气泡插件, 个人博客背景专用, 本人先用一步(https://blog.yyge.top/)

源码地址

在线演示

https://codesandbox.io/s/canvascolorfulbubble-gug75

基本用法

new ColorfulBubble({
container:
});

可配置项

interface IStaticColorfulBubbleScaleRangeParams {
min: number,
max: number,
};

Key

Type

Require

Description

container

string

false

挂载的canvas节点

cvsWidth

number

false

画布的初始宽

cvsHeight

number

false

画布的初始高

cvsBgColor

string

false

画布背景色

bubbleNum

number

false

生成的气泡数量

bubbleScaleRange

IStaticColorfulBubbleScaleRangeParams

false

气泡半径大小

bubbleExpandRange

number

false

气泡最大伸缩距离

bubbleOpacity

number

false

气泡初始透明度

bubbleSpeed

number

false

气泡运动步长

bubbleColorArr

string[]

false

气泡颜色

allowMouse

boolean

false

是否允许鼠标交互

注意事项

Q: 关于container配置项?

A: 默认为可选, 但是不填的话会抛出自定义的异常, 所以最好还是提供一个挂载节点👌.

Q: 是否会添加opacity变化功能?

A: 有时间再搞.