MikuBlog / Ball

简易小球插件

自制小球(Canvas)插件

效果图

简介

随手自制的一个简易小球插件,碰撞浏览器四边框反弹，匀速运动~

入口js为LineBall.main.min.js

更新

• 1.0.0 - 『简易小球插件』
• 1.0.1 - 『兼容了vue路由切换』
• 1.1.0 - 『增加了npm安装使用』

使用

为了适配移动端，请在头部加上如下语句

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

使用方法1

直接安装使用 npm install ball-master

在所需组件中引入import ballRun from 'ball-master'

使用方法2

头部引入文件

<script src="js/LineBall.main.min.js"></script>

通用配置

//不传参默则默认为如下设置
ballRun({

        // 获取元素(CSS选择器 该元素提供背景容器)
        Element: "body",
		
        // 小球数量
        Number: 50,
		
        // 小球半径
        Radius: 8,
		
        // 小球横向速度最大值,速度范围(0~0.3)
        spotSpeedX: 0.3,
		
        // 小球纵向速度最大值,速度范围(0~0.3)
        spotSpeedY: 0.3,
		
        // 小球覆盖样式:"lighter"颜色叠加,"xor"覆盖区域显示白色
        globalCompositeOperation: "xor",
		
        // 小球透明度
        globalAlpha: 0.3,
		
        // 配置小球颜色数组(随机呈现小球颜色)
        spotColor: ["rgb(20, 243, 243)", "rgb(56, 255, 255)", "rgb(199, 255, 255)"]

})

下载

git clone https://github.com/MikuBlog/Ball.git