canvas实现抽奖插件—大转盘和九宫格
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了canvas实现抽奖插件—大转盘和九宫格，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2269字，纯文字阅读大概需要4分钟。
内容图文
大家好，我是小王，一个很喜欢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>
内容总结
以上是互联网集市为您收集整理的canvas实现抽奖插件—大转盘和九宫格全部内容，希望文章能够帮你解决canvas实现抽奖插件—大转盘和九宫格所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】