canvas-pendulum
基于canvas的单摆组件。demo:https://canvas-pendulum.kai666666.com/
安装
npm install canvas-pendulum
使用
import CanvasPendulum from 'canvas-pendulum'
new CanvasPendulum({
el: document.getElementById('canvas'),
ballNum: 4,
ballStyles: ['https://www.kai666666.com/images/avatar.png','#00ff00','orange','transparent']
}).start().on('ping',(e)=>{ // 小球碰撞事件
// let { isFrist } = e; // 是否第一个小球被碰撞了 false为最后一个小球碰撞了
console.log('碰撞了');
}).on('ballClick',(e)=>{ // 小球被点击事件
// let { spend,index, x, y } = e; // spend不等于0表示小球在运动
console.log('小球被点击');
});参数
| 参数 |
描述 |
类型 |
默认值 |
| el |
DOM 元素 |
string |
null,(即追加到 document.body 上) |
| ballNum |
小球个数 |
number |
1 |
| ballStyles |
小球样式 |
string/attay |
'red' |
| width |
canvas 宽度 |
number |
300 |
| height |
canvas 高度 |
number |
150 |
| T |
小球周期（毫秒） |
number |
1000 |
| maxAngle |
单摆最大角度 |
number |
20 |
| lineWidth |
线的长度 |
number |
(canvas 高度-小球直径)*90% |
事件
| 事件名称 |
描述 |
| ping |
小球碰撞事件 |
| ballClick |
小球被点击事件 |