canvas实现抽奖插件—大转盘和九宫格
作者：互联网
大家好，我是小王，一个很喜欢Coding但很笨的小女孩。 很喜欢这句话：人数没有白走的路，每一步都算数，关注我，后期分享更多资源！
效果如下：
部分代码如下（需要的源码小伙伴可以私信我）：
<!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>
<div id="my-lucky"></div>
<script src="../test.js"></script>
<script>
let luckyNum = 1
// 创建九宫格抽奖
let luckyGrid = new LuckyCanvas.LuckyGrid({
el: '#my-lucky',
width: '300px',
height: '300px'
}, {
blocks: [
{ padding: '15px', background: '#ffc27a', borderRadius: 28 },
{ padding: '4px', background: '#ff4a4c', borderRadius: 23 },
{ padding: '4px', background: '#ff625b', borderRadius: 20 },
],
button: {
x: 1, y: 1,
background: 'linear-gradient(270deg, #FFDCB8, #FDC689)',
shadow: '0 5 1 #e89b4f',
fonts: [
{ text: `${luckyNum} 次`, fontColor: '#fff', top: '73%', fontSize: '11px' },
],
imgs: [
{ src: './img/button.png', width: '65%', top: '12%' },
{ src: './img/btn.png', width: '50%', top: '73%' }
]
},
activeStyle: {
background: 'linear-gradient(270deg, #FFDCB8, #FDC689)',
shadow: ''
},
defaultConfig: {
gutter: 5,
},
defaultStyle: {
borderRadius: 15,
fontColor: '#DF424B',
fontSize: '14px',
textAlign: 'center',
background: '#fff',
shadow: '0 5 1 #ebf1f4'
},
start () {
if (!luckyNum) return alert('还剩0次抽奖机会')
luckyGrid.play()
setTimeout(() => {
luckyGrid.stop(Math.random() * 8 >> 0)
}, 2000)
},
end (prize) {
alert(`恭喜你获得大奖: ${prize.name}`)
luckyNum--
luckyGrid.button.fonts[0].text = `${luckyNum} 次`
}
})
// 模拟接口异步请求奖品列表
setTimeout(() => {
const prizes = []
const data = [
{ name: '1元红包', img: './img/0.png' },
{ name: '100元红包', img: './img/1.png' },
{ name: '0.5元红包', img: './img/2.png' },
{ name: '2元红包', img: './img/3.png' },
{ name: '10元红包', img: './img/4.png' },
{ name: '50元红包', img: './img/5.png' },
{ name: '0.3元红包', img: './img/6.png' },
{ name: '5元红包', img: './img/7.png' }
]
let axis = [[0, 0], [1, 0], [2, 0], [2, 1], [2, 2], [1, 2], [0, 2], [0, 1]]
for (let i = 0; i < 8; i++) {
let item = data[i]
prizes.push({
name: item.name,
index: i, x: axis[i][0], y: axis[i][1],
fonts: [{ text: item.name, top: '70%' }],
imgs: [{ src: item.img, width: '53%', top: '8%' }]
})
}
luckyGrid.prizes = prizes
})
</script>
</body>
</html>
标签：红包,插件,name,img,luckyGrid,九宫格,大转盘,background,png 来源： https://blog.csdn.net/m0_46374969/article/details/115482954