<div id="my-lucky"></div>
<script>
const myLucky = new LuckyCanvas.LuckyWheel('#my-lucky', {
width: '240px',
height: '240px',
blocks: [
{ padding: '20px' },
{
padding: '20px',
imgs: [{
src: '/static/imgs/block-img.png',
width: '100%',
rotate: true
}]
}
],
buttons: [
{ radius: '40%', background: '#617df2' },
{ radius: '35%', background: '#afc8ff' },
{
radius: '30%', background: '#869cfa',
pointer: true,
fonts: [{ text: '开始', top: '-10px' }]
},
],
prizes: [
{ title: '手机' },
{ title: '1' },
{ title: '2' },
{ title: '3' },
{ title: '4' },
{ title: '5' },
{ title: '6' },
{ title: '7' },
],
defaultConfig: {
offsetDegree: -20
},
start: function() {
// 开始游戏
myLucky.play()
// 假设接口的请求速度是1s
setTimeout(_ => {
// 停止游戏
myLucky.stop(0)
}, 1000)
},
end: function(prize) { // 游戏停止时触发
alert('恭喜中奖: ' + prize.title)
}
})
</script>
LuckyCanvas大转盘图片的转动
最新推荐文章于 2024-09-04 20:18:34 发布