initial commit

README.md

@@ -1,3 +1,49 @@
 # particle
 
-HTML5中，采用JavaScript和Canvas实现运动粒子效果，兼容IE10+，chrome、safari等。
+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 | 粒子颜色，可为颜色字符串或颜色字符串数组，若为字符串数组，则为\[起始色,终止色]，粒子颜色会在该范围内改变 |