开源地址:
执行代码:
const canvasPendulum = new CanvasPendulum({
el: document.getElementById('canvas'),
ballNum: 4,
ballStyles: [
'https://www.kai666666.com/images/avatar.png',
'#00ff00',
'orange',
'transparent',
],
})
canvasPendulum.start()
canvasPendulum.on('ping', (e) => {
// 小球碰撞事件
// let { isFrist } = e; // 是否第一个小球被碰撞了 false为最后一个小球碰撞了
console.log('碰撞了')
})
canvasPendulum.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% |