particle-canvas-pro 1.1.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -21
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -40,10 +40,10 @@ yarn add particle-canvas-pro
|
|
|
40
40
|
### 全屏背景模式
|
|
41
41
|
|
|
42
42
|
```javascript
|
|
43
|
-
import
|
|
43
|
+
import ParticleCanvasPro from 'particle-canvas-pro';
|
|
44
44
|
|
|
45
|
-
//
|
|
46
|
-
const particleSystem = new
|
|
45
|
+
// 创建粒子动画实例
|
|
46
|
+
const particleSystem = new ParticleCanvasPro({
|
|
47
47
|
isBackground: true, // 全屏背景模式，默认模式
|
|
48
48
|
particleNumber: 150, // 粒子数量
|
|
49
49
|
particleColor: '#9c4aff', // 粒子颜色
|
|
@@ -58,10 +58,10 @@ particleSystem.start();
|
|
|
58
58
|
### 内嵌模式（自定义容器）
|
|
59
59
|
|
|
60
60
|
```javascript
|
|
61
|
-
import
|
|
61
|
+
import ParticleCanvasPro from 'particle-canvas-pro';
|
|
62
62
|
|
|
63
63
|
// 在指定容器中创建粒子画布
|
|
64
|
-
const particleSystem = new
|
|
64
|
+
const particleSystem = new ParticleCanvasPro({
|
|
65
65
|
canvasContainer: '#particle-container', // 容器选择器
|
|
66
66
|
isBackground: false, // 非背景模式
|
|
67
67
|
canvasSize: [800, 600], // 画布尺寸
|
|
@@ -76,22 +76,22 @@ particleSystem.start();
|
|
|
76
76
|
|
|
77
77
|
# 参数配置
|
|
78
78
|
|
|
79
|
-
| 参数名 | 说明
|
|
80
|
-
|
|
81
|
-
| canvasContainer | 画布容器元素或选择器
|
|
82
|
-
| isBackground | 是否作为页面背景
|
|
83
|
-
| canvasBackgroundColor | 画布背景颜色
|
|
84
|
-
| particleNumber | 粒子数量
|
|
85
|
-
| particleSpeed | 粒子运动速度
|
|
86
|
-
| particleSize | 粒子大小（像素）
|
|
87
|
-
| particleColor | 粒子颜色（单色或多色）
|
|
88
|
-
| lineWidth | 连线宽度（像素）
|
|
89
|
-
| lineColor | 连线颜色
|
|
90
|
-
| lineOpacity | 连线透明度
|
|
91
|
-
| linkDistance | 连线距离（像素）
|
|
92
|
-
| showLinkLine | 是否显示连线
|
|
93
|
-
| canvasSize | 画布尺寸（非背景模式）
|
|
94
|
-
| trailValue | 轨迹效果强度
|
|
79
|
+
| 参数名 | 说明 | 类型 | 取值范围 | 默认值 |
|
|
80
|
+
|------------------------|--------------------------------------|--------------------------|-----------------------------|---------------------------|
|
|
81
|
+
| canvasContainer | 画布容器元素或选择器 | `string` / `HTMLElement` | - | `document.body` |
|
|
82
|
+
| isBackground | 是否作为页面背景 | `boolean` | `true` / `false` | `true` |
|
|
83
|
+
| canvasBackgroundColor | 画布背景颜色 | `string` | - | `rgba(10, 10, 25, 1)` |
|
|
84
|
+
| particleNumber | 粒子数量 | `number` | 1-800 | 150 |
|
|
85
|
+
| particleSpeed | 粒子运动速度 | `number` | 0.1-3 | 1 |
|
|
86
|
+
| particleSize | 粒子大小（像素） | `number` | 1-10 | 5 |
|
|
87
|
+
| particleColor | 粒子颜色（单色或多色） | `string` / `string[]` | - | `rgba(156, 74, 255, 0.6)` |
|
|
88
|
+
| lineWidth | 连线宽度（像素） | `number` | 0.1-5 | 1 |
|
|
89
|
+
| lineColor | 连线颜色 | `string` | - | `#ffffff` |
|
|
90
|
+
| lineOpacity | 连线透明度 | `number` | 0-1 | 0.3 |
|
|
91
|
+
| linkDistance | 连线距离（像素） | `number` | 10-300 | 120 |
|
|
92
|
+
| showLinkLine | 是否显示连线 | `boolean` | `true` / `false` | `true` |
|
|
93
|
+
| canvasSize | 画布尺寸（非背景模式） | `[number, number]` | - | [800, 600] |
|
|
94
|
+
| trailValue | 轨迹效果强度 | `number` | 0-1 | 0.2 |
|
|
95
95
|
|
|
96
96
|
# 实例方法
|
|
97
97
|
|
package/package.json
CHANGED