Skip to content

KaiOrange/canvas-pendulum

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
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 小球被点击事件