lottery-rotate
适配移动端rem布局的canvas大转盘抽奖插件
Author：Alan Chen E-mail: [email protected]
* 使用说明
- 1.目前给出了ES5和ES6两种语法的版本，有后缀名es5为es5版本，可以直接用script标签引入，es6版本必须使用import引入，因为插件使用了export导出模块。
- 2.使用该插件十分简单，无需导入其余css，不依赖任何插件，只需先初始化一个实例，es5版本构造函数名必须为LotteryRotate，例如：
new LotteryRotate()而es6版本可以根据import引入模块自定义命名，因为插件是export default导出。
* 配置项 Object
- 构造器传入的是一个对象，所有参数都作为对象的键值对。
obj【DOM】必选 大转盘最外层盒子，插件挂载的dom结构，例如：document.querySelector('.lottery_box')。eType【String】必选 抽奖按钮的事件类型，不需要加前缀on，例如：touchstart。rotateTime【Number】必选 抽奖一次的总时间，单位是毫秒，例如：3000。preRotate【Number】必选 中奖前预旋转的圈数，提高用户体验，必须是正整数，例如：6。chance【Number】必选 抽奖次数，次数不足再触发事件会弹窗提示，必须是正整数，例如：1。rem【Number】必选 canvas的宽和高，此处传入的是rem布局中的rem值，例如：4.05。areaColor【颜色】可选 canvas绘制扇形区域的填充颜色，默认是#cde59d。btn【DOM】必选 抽奖按钮的dom结构，例如：document.querySelector('.btn')。listCont【Array | String】必选 奖品名称，奖品必须是字符串，写入数组里，例如：['1元话费','2元话费','3元话费','4元话费','5元话费','6元话费']。
* 方法调用 Object
- 插件提供了一个方法
rotate，而且必须在实例初始化之后调用，函数里传入的是一个对象，所有参数作为对象的键值对。ajax(list)Function可选。请求后台的回调函数，用来获取中奖的奖项，必须return一个数字，数字和数组中的索引对应，默认有一个参数list，list是奖品数组listCont，如果不传入ajax回调函数，插件默认会调用随机数抽奖success(award)Function可选。抽奖成功的回调函数，默认有一个参数award，award` 是奖品名称failed()Function可选。当抽奖次数为0抽奖结束的回调函数，如果不写此函数，则默认alert('您抽奖次数已用完')`
* 使用案例 demo
let Lottery=new LotteryRotate({
obj:document.querySelector('.lottery_box'),
eType:'touchstart',
rotateTime:3000,//抽奖一次总旋转时间
preRotate:6,//预旋转圈数
chance:1,//可抽奖次数
rem:4.05,
areaColor:'#ffe462',
btn:document.querySelector('.btn'),
listCont:['10元话费','2元话费','1元话费','10元话费','2元话费','1元话费']
});
Lottery.rotate({
//请求后台的函数，必须return一个数字，数字和奖品数组中的索引对应，list是奖品数组listCont
ajax:(list)=>list.indexOf('1元话费'),
//抽奖成功的函数，award为中奖后的奖品名称，是字符串
success:(award)=>alert(`恭喜你获得${award}`),
failed:()=>{console.log('你已经没有机会咯')}
});