canvas实现抽奖插件—大转盘和九宫格

2021-04-07 13:00:21 阅读：472 来源： 互联网

标签：红包插件 name img luckyGrid 九宫格大转盘 background png

大家好，我是小王，一个很喜欢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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

canvas实现抽奖插件—大转盘和九宫格