canvas-stars-line

各大博客网站都在用的 星空连线 背景插件, 完全自定义实现

源码地址

在线演示

https://codesandbox.io/s/canvasstarsline-ujkd5

基本用法

new StarsLine({
container: '#app',
});

可配置项

export interface IStaticStarsLineBallRadiusParams {
min: number,
max: number,
};

Key

Type

Require

Description

container

string

true

挂载的canvas节点

cvsWidth

number

false

画布宽

cvsHeight

number

false

画布高

cvsBgColor

string

false

画布背景颜色

ballNum

number

false

星空点数量

ballRadius

IStaticStarsLineBallRadiusParams

false

星的半径

allowMouse

boolean

false

是否允许鼠标交互

lineColor

string

false

连线颜色

lineWidth

number

false

连线宽度

ballSpeed

number

false

星空点移动速度

ballColor

string

false

星空点颜色

isResize

boolean

false

是否跟随窗口大小

safeDistance

number

false

连线安全距离

注意事项

鼠标交互(allowMouse)暂未实现.