50 lines
1.7 KiB
Markdown
50 lines
1.7 KiB
Markdown
# particle
|
||
|
||
HTML5中，采用JavaScript和Canvas实现运动粒子效果，兼容IE10+，chrome、safari等。
|
||
|
||
本项目基于 [https://github.com/AnCIity/ui-login-canvas](https://github.com/AnCIity/ui-login-canvas) 修改
|
||
|
||
|
||
|
||
用法：
|
||
```javascript
|
||
var particle = new Particle({
|
||
canvas: document.getElementById('canvas'),
|
||
width: 600,
|
||
height: 400,
|
||
ballNumber: 100,
|
||
ballMinSize: 1,
|
||
ballMaxSize: 5,
|
||
fps: 24,
|
||
color: 'rgba(84, 23, 196, 0.75)'
|
||
});
|
||
|
||
particle.reDraw({
|
||
width: 600,
|
||
height: 400,
|
||
ballNumber: 100,
|
||
ballMinSize: 1,
|
||
ballMaxSize: 5,
|
||
color: 'rgba(84, 23, 196, 0.75)'
|
||
});
|
||
```
|
||
方法：
|
||
|
||
| 方法名 | 方法数说明 |
|
||
| ------ | ------ |
|
||
|new Particle(options)|实例化粒子动画对象|
|
||
|instance.reDraw(options)|重绘粒子动画，此方法未new Particle()的实例对象上的方法|
|
||
|
||
参数options说明：
|
||
|
||
| 参数名 | 参数类型 | 参数说明 |
|
||
| ------ | ------ | ------ |
|
||
| canvas | HTMLCanvasElement | 即通过原生js获取到的canvas对象 |
|
||
| width | number | 粒子效果宽度，不设为自动获取canvas宽度 |
|
||
| height | number | 粒子效果高度，不设为自动获取canvas高度 |
|
||
| ballNumber | number | 粒子个数，越大越多，越多相对越卡 |
|
||
| ballMinSize | number | 粒子最小尺寸，粒子尺寸减少到此值后，反向缓慢增加到最大尺寸 |
|
||
| ballMaxSize | number | 粒子最大尺寸，粒子尺寸增加到此值后，反向缓慢减少到最小尺寸 |
|
||
| fps | number | 动画帧数，一半设为24就可以了 |
|
||
| color | string 或 string array | 粒子颜色，可为颜色字符串或颜色字符串数组，若为字符串数组，则为\[起始色,终止色]，粒子颜色会在该范围内改变 |
|