# particle

HTML5中，采用JavaScript和Canvas实现运动粒子效果，兼容IE10+，chrome、safari等。

本项目基于 [https://github.com/AnCIity/ui-login-canvas](https://github.com/AnCIity/ui-login-canvas) 修改

![预览图](preview.gif)

用法：
```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 | 粒子颜色，可为颜色字符串或颜色字符串数组，若为字符串数组，则为\[起始色,终止色]，粒子颜色会在该范围内改变 |