lucky-canvas.js是一款支持九宫格和的电商抽奖大转盘插件-BFW插件库

lucky-canvas.js是一款支持九宫格和的电商抽奖大转盘插件

lucky-canvas.js是一款电商抽奖大转盘插件，支持圆盘与九宫格转盘模式。

使用方式：

第一步引入插件

 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lucky-canvas.js"></script>

第二步准备dom

 <div id="my-lucky"></div>

第三步准备奖品奖项数据

  // 设置奖品
          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: `//repo.bfw.wiki/bfwrepo/images/zhuanpan/4/${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: '//repo.bfw.wiki/bfwrepo/images/zhuanpan/4/button.png', width: '65%', top: '-50%' }]
              }
            ],
            start () {
              luckyWheel.play()
              setTimeout(() => {
                luckyWheel.stop(Math.random() * 8 >> 0)
              }, 3000)
            },
            end (prize) {
              alert(`恭喜你获得${prize.title}`)
            },
          })

wan

完整代码

圆盘大转盘抽奖代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #my-lucky{
            margin: 10px;
        }
    </style>
</head>

<body>

    <div id="my-lucky"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lucky-canvas.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: `//repo.bfw.wiki/bfwrepo/images/zhuanpan/4/${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: '//repo.bfw.wiki/bfwrepo/images/zhuanpan/4/button.png', width: '65%', top: '-50%' }]
              }
            ],
            start () {
              luckyWheel.play()
              setTimeout(() => {
                luckyWheel.stop(Math.random() * 8 >> 0)
              }, 3000)
            },
            end (prize) {
              alert(`恭喜你获得${prize.title}`)
            },
          })
    </script>

</body>

</html>

九宫格大转盘抽奖

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    #my-lucky{
        margin: 10px;
    }
</style>
</head>

<body>
    <div id="my-lucky"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lucky-canvas.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: '//repo.bfw.wiki/bfwrepo/images/zhuanpan/4/button.png', width: '65%', top: '12%' },
              { src: '//repo.bfw.wiki/bfwrepo/images/zhuanpan/4/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: '//repo.bfw.wiki/bfwrepo/images/zhuanpan/4/0.png' },
            { name: '100元红包', img: '//repo.bfw.wiki/bfwrepo/images/zhuanpan/4/1.png' },
            { name: '0.5元红包', img: '//repo.bfw.wiki/bfwrepo/images/zhuanpan/4/2.png' },
            { name: '2元红包', img: '//repo.bfw.wiki/bfwrepo/images/zhuanpan/4/3.png' },
            { name: '10元红包', img: '//repo.bfw.wiki/bfwrepo/images/zhuanpan/4/4.png' },
            { name: '50元红包', img: '//repo.bfw.wiki/bfwrepo/images/zhuanpan/4/5.png' },
            { name: '0.3元红包', img: '//repo.bfw.wiki/bfwrepo/images/zhuanpan/4/6.png' },
            { name: '5元红包', img: '//repo.bfw.wiki/bfwrepo/images/zhuanpan/4/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>