本插件可以帮助你，快速创建一个 活动抽奖转盘，并提供旋转转盘的方法。 插件基于jquery，使用canvas创建转盘。
适用于所有主流浏览器及移动端的浏览器。IE8及以下不支持
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
</body>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="./turntable.js"></script>
<script>
// 定义转盘奖品
var wheelSurf = $('#myCanvas').WheelSurf({
list: list, // 奖品 列表，(必填)
outerCircle: {
color: '#df1e15' // 外圈颜色(可选)
},
innerCircle: {
color: '#f4ad26' // 里圈颜色(可选)
},
dots: ['#fbf0a9', '#fbb936'], // 装饰点颜色(可选)
disk: ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'], //中心奖盘的颜色，默认7彩(可选)
title: {
color: '#5c1e08',
font: '19px Arial'
} // 奖品标题样式(可选)
})
// 初始化转盘
wheelSurf.init()
// 转动转盘，
wheelSurf.lottery(旋转角度, function () {
console.log("旋转结束的回调函数")
})
</script>| 方法 | 对象 | 参数 | 返回值 |
|---|---|---|---|
| WheelSurf() | canvas的JQuery对象 | @param {Object} options @param {Array} options.list 存储奖品的的列表，example [{1:{name:'谢谢参与',image:'1.jpg'}}] @param {Object} options.outerCircle {color:'#df1e15'} 外圈颜色，默认红色 @param {Object} options.innerCircle {color:'#f4ad26'} 里圈颜色，默认黄色 @param {Array} options.dots ['#fbf0a9', '#fbb936'] 装饰点颜色 ，默认深黄浅黄交替 @param {Array} options.disk ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'] 中心奖盘的颜色，默认7彩 @param {Object} options.title {color:'#5c1e08',font:'19px Arial'} 奖品标题颜色 |
WheelSurf对象 |
| init() | WheelSurf对象 | null | null |
| lottery() | WheelSurf对象 | @param {number} 角度 @param {function} callback 旋转完成后的回调 |
null |
因为无法得知获取奖品接口的格式及抽中奖品返回的格式，
- 本插件只提供初始化转盘和旋转转盘的接口。
- 需要按照demo 格式化成指定参数格式，才能正确初始化转盘
- 需要手写一点逻辑计算旋转角度 （顺时针数第几个奖品*360/奖品数量+（360/奖品数量）/2）