0.0.2 • Published 4 years ago

canvas-pendulum v0.0.2

Weekly downloads
-
License
ISC
Repository
-
Last release
4 years ago

canvas-pendulum

基于canvas的单摆组件。demo:https://canvas-pendulum.kai666666.top/

安装

npm install canvas-pendulum

使用

import CanvasPendulum from 'canvas-pendulum'

new CanvasPendulum({
  el: document.getElementById('canvas'),
  ballNum: 4,
  ballStyles: ['https://www.kai666666.top/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('小球被点击');
});

参数

参数描述类型默认值
elDOM元素stringnull,(即追加到document.body上)
ballNum小球个数number1
ballStyles小球样式string/attay'red'
widthcanvas宽度number300
heightcanvas高度number150
T小球周期(毫秒)number1000
maxAngle单摆最大角度number20
lineWidth线的长度number(canvas高度-小球直径)*90%

事件

事件名称描述
ping小球碰撞事件
ballClick小球被点击事件