https://100px.net/demo/wheel/ymc.html
图片必须要有
中奖信息由：luckyWheel.stop(4)，4为数组索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<body>
<div id="my-lucky"></div>
<script src="https://cdn.jsdelivr.net/npm/lucky-canvas/umd.min.js"></script>
<script>
// 设置奖品
const prizes = []
let data = ['1元红包', '100元红包', '0.5元红包', '2元红包', '10元红包', '50元红包', '0.3元红包', '5元红包']
data.forEach((item, index) => {
prizes.push({
title: item,
background: index % 2 ? '#f9e3bb' : '#f8d384',
fonts: [{ text: item, top: '10%' }],
imgs:[{ src: `./red.png`, width: '30%', top: '35%' }],
})
})
// 创建大转盘抽奖
let luckyWheel = new LuckyCanvas.LuckyWheel({
el: '#my-lucky',
width: '300px',
height: '300px',
}, {
prizes: prizes,
defaultStyle: {
fontColor: '#d64737',
fontSize: '14px'
},
blocks: [
{ padding: '13px', background: '#d64737' }
],
buttons: [
{ radius: '50px', background: '#d64737' },
{ radius: '45px', background: '#fff' },
{ radius: '41px', background: '#f6c66f', pointer: true },
{
radius: '35px', background: '#ffdea0',
imgs: [{ src: './red.png', width: '65%', top: '-50%' }]
}
],
start () {
luckyWheel.play()
setTimeout(() => {
luckyWheel.stop(4)
}, 3000)
},
end (prize) {
alert(`恭喜你获得${prize.title}`)
},
})
</script>
</body>
</body>
</html>
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
