Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
lib
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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 小球被点击事件

About

基于canvas的单摆组件

Resources

Releases

No releases published