<!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@1.4/dist/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: `./img/${index}.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: './img/button.png', width: '65%', top: '-50%' }]
}
],
start () {
luckyWheel.play()
setTimeout(() => {
luckyWheel.stop(Math.random() * 8 >> 0)
}, 3000)
},
end (prize) {
alert(`恭喜你获得${prize.title}`)
},
})
</script>
</body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<template>
<LuckyWheel
ref="LuckyWheel"
width="300px"
height="300px"
:prizes="prizes"
:default-style="defaultStyle"
:blocks="blocks"
:buttons="buttons"
@start="startCallBack"
@end="endCallBack"
/>
</template>
<script>
export default {
data () {
return {
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: require('./img/button.png'), width: '65%', top: '-50%' }]
}
],
}
},
mounted () {
this.getPrizesList()
},
methods: {
getPrizesList () {
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: require(`./img/${index}.png`), width: '30%', top: '35%' }],
})
})
this.prizes = prizes
},
startCallBack () {
this.$refs.LuckyWheel.play()
setTimeout(() => {
this.$refs.LuckyWheel.stop(Math.random() * 8 >> 0)
}, 3000)
},
endCallBack (prize) {
alert(`恭喜你获得${prize.title}`)
},
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66