1.1.0 • Published 6 years ago
dotrun v1.1.0
canvas粒子动画
介绍
- dotRun 基于es6开发的canvas动画插件,为实现粒子动画效果
- es5请单独下载dotRun.es5.js
- 动点连线
- 鼠标动点连线
安装
npm install dotrun
展示地址
使用
<div class="box">
<canvas id="canvas"></canvas>
</div>
// es5
<script src="dotRun.es5.js"></script>
import DotRun from 'dotRun'
let canvas=document.getElementById('canvas')
let dotrun=new DotRun(canvas,{
canvasWidth:1000, // 参数
canvasHeight:400 // 参数
})
// 当然也可以直接写入DOM元素,此写法使用querySelector属性
let dotrun=new DotRun('#canvas',{
canvasWidth:1000, // 参数
canvasHeight:400 // 参数
})
参数
canvasWidth
- 类型: Number
- 默认值: 1000
- 作用: 设置canvas像素宽度
- 备注: 若想设置为全屏宽度,写入字符串'full'
canvasHeight
- 类型: Number
- 默认值: 300
- 作用: 设置canvas像素高度
- 备注: 若想设置为全屏高度,写入字符串'full'
dotsNumber
- 类型: Number
- 默认值: 200
- 作用: 设置动点个数
dotsRadius
- 类型: Number
- 默认值: 3
- 作用: 设置动点半径
isRandomDots
- 类型: Boolean
- 默认值: false
- 作用: 设置是否随机动点的大小,值为dotsRadius*Math.random()
lineLength
- 类型: Number
- 默认值: 50
- 作用: 设置动点间连线的长度,当动点间距离小于此数,将连线
- 备注: 若想设置为0,请写成'0',字符串形式
speedX
- 类型: Number
- 默认值: 2
- 作用: 设置动点X轴方向运动速度,速度为以此为最大的随机数
- 备注: 可以设置为0
speedY
- 类型: Number
- 默认值: 1.5
- 作用: 设置动点Y轴方向运动速度,速度为以此为最大的随机数
- 备注: 可以设置为0
isHover
- 类型: Boolean
- 默认值: false
- 作用: 设置鼠标在canvas上滑动时,是否需要与动点连线
isClick
- 类型: Boolean
- 默认值: false
- 作用: 设置鼠标在canvas上点击时,是否需要增加动点个数,个数以点击次数为准
rebound
- 类型: Boolean
- 默认值: false
- 作用: 设置是否需要动点的回弹效果,当false时则回弹,true时不回弹
directionX
- 类型: String
- 默认值: 'right'
- 作用: 设置动点运动方向 right向右移动 left向左移动
- 备注: 此参数仅在rebound=true时,触发
directionY
- 类型: String
- 默认值: 'bottom'
- 作用: 设置动点运动方向 top向上移动 bottom向下移动
- 备注: 此参数仅在rebound=true时,触发
mouseLineLength
- 类型: Number
- 默认值: 100
- 作用: 设置鼠标在canvas上滑动时,与动点之间的连线长度
mouseColor
- 类型: String
- 默认值: '#f00'
- 作用: 设置鼠标连线的颜色
- 备注: 目前仅支持十六进制颜色样式
canvasBackColor
- 类型: String
- 默认值: 'transparent'
- 作用: 设置canvas背景颜色
ArcColor
- 类型: String
- 默认值: '#333'
- 作用: 设置动点圆颜色
- 备注: 目前仅支持十六进制颜色样式
lineColor
- 类型: String
- 默认值: '#ccc'
- 作用: 设置动点连线颜色
- 备注: 目前仅支持十六进制颜色样式