标签：插件 text top fonts Canvas Lucky width range background
官方网站：
https://100px.net/
新建一个html网页'lucky-canvas.html'，引入刚刚新建的js文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>抽奖</title>
<style>
body{
background-color:#444;
font-size:14px;
text-align:center;
}
a{color:#eee}
p{
font-size:50px;
color:#eee;
text-align:center;
bottom:0px;
padding-top:0px;
font-weight:normal;
}
#wenzi{
position: absolute;
top: 0%; /* 与顶部的距离 */
left: 41%; /* 与左侧的距离 */
padding: 0px;
display: flex;
justify-content: center; /* 水平居中 */
}
#my-lucky{
position: absolute;
top: 10%; /* 与顶部的距离 */
left: 25%; /* 与左侧的距离 */
padding: 50px;
display: flex;
justify-content: center; /* 水平居中 */
}
</style>
<script src="/lucky-canvas.js" type="text/javascript"></script>
</head>
<body>
<div id="wenzi"><p>抽奖</p></div>
<div id="my-lucky"></div>
<script>
const myLucky = new LuckyCanvas.LuckyWheel('#my-lucky', {
width: '600px',
height: '600px',
blocks: [{ padding: '10px', background: '#ff4500' }],
prizes: [
{ range:2,background: '#e9e8fe', fonts: [{ text: '一等奖' }] ,imgs:[{src:'/mrbs/img/01.png', top:'40px',width: '50%'}]},
{ range:2,background: '#b8c5f2', fonts: [{ text: '二等奖' }] ,imgs:[{src:'/mrbs/img/02.png', top:'40px',width: '50%'}]},
{ range:0,background: '#e9e8fe', fonts: [{ text: '三等奖' }] ,imgs:[{src:'/mrbs/img/03.png', top:'40px',width: '50%'}]},
{ range:0,background: '#b8c5f2', fonts: [{ text: '四等奖' }] ,imgs:[{src:'/mrbs/img/04.png', top:'40px',width: '50%'}]},
{ range:0,background: '#e9e8fe', fonts: [{ text: '五等奖' }] ,imgs:[{src:'/mrbs/img/05.png', top:'40px',width: '50%'}]},
{ range:0,background: '#b8c5f2', fonts: [{ text: '六等奖' }] ,imgs:[{src:'/mrbs/img/01.png', top:'40px',width: '50%'}]},
],
buttons: [
{ radius: '35%', background: '#617df2' },
{ radius: '30%', background: '#afc8ff' },
{
radius: '25%', background: '#869cfa',
pointer: true,
fonts: [{ text: '开始',fontSize:'32px', top: '-20px' }]
},
],
start: function() {
// 开始游戏
myLucky.play()
// 假设接口的请求速度是1s
// 生成一个随机角度作为停止位置
const randomAngle = Math.floor(Math.random() * 360);
// 生成一个1到3秒之间的随机时间
const randomTime = Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000; // 1000毫秒 = 1秒
setTimeout(_ => {
// 停止游戏（使用1-3秒内随机时间）,并且使用随机角度
myLucky.stop(randomAngle) //注意: 使用 range 属性时, stop 方法就不能传递中奖索引了, 否则 stop 传递的索引具有优先级, 会无视 range 属性;
}, randomTime)
},
end: function(prize) { // 游戏停止时触发
alert('恭喜中奖: ' + prize.fonts[0].text)
}
})
</script>
</body>
</html>
标签：插件,
text,
top,
fonts,
Canvas,
Lucky,
width,
range,
background
From： https://www.cnblogs.com/cn1151/p/17918368.html