lucky-canvas 活动大转盘，老虎机，支持pc以及h5,还支持微信小程序

活动大转盘，老虎机，支持pc以及h5,还支持微信小程序。我就不写教程和使用方式了，api里面写的很详细。

API的链接（点击这里）

lucky-canvas 链接在上面↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 基于 JS + Canvas 实现的【大转盘 & 九宫格 & 老虎机】抽奖，致力于为 WEB 前端提供一个功能强大且专业可靠的营销组件，只需要通过简单配置即可实现自由化定制。

可以说是开箱即用了，下面展示API中的部分代码。vue的事例（有很多API写的很详细，上面有API的链接）

<template>
  <LuckyWheel
    ref="myLucky"
    width="300px"
    height="300px"
    :prizes="prizes"
    :blocks="blocks"
    :buttons="buttons"
    @start="startCallback"
    @end="endCallback"
  />
</template>

<script>
export default {
  data () {
    return {
      blocks: [
        { padding: '10px', background: '#869cfa' }
      ],
      prizes: [
        { background: '#e9e8fe', fonts: [{ text: '0' }] },
        { background: '#b8c5f2', fonts: [{ text: '1' }] },
        { background: '#e9e8fe', fonts: [{ text: '2' }] },
        { background: '#b8c5f2', fonts: [{ text: '3' }] },
        { background: '#e9e8fe', fonts: [{ text: '4' }] },
        { background: '#b8c5f2', fonts: [{ text: '5' }] },
      ],
      buttons: [
        { radius: '40%', background: '#617df2' },
        { radius: '35%', background: '#afc8ff' },
        {
          radius: '30%', background: '#869cfa',
          pointer: true,
          fonts: [{ text: '开始', top: '-10px' }]
        }
      ]
    }
  },
  methods: {
    // 点击抽奖按钮会触发star回调
    startCallback () {
      // 调用抽奖组件的play方法开始游戏
      this.$refs.myLucky.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        const index = 0
        // 调用stop停止旋转并传递中奖索引
        this.$refs.myLucky.stop(index)
      }, 3000)
    },
    // 抽奖结束会触发end回调
    endCallback (prize) {
      console.log(prize)
    },
  }
}
</script>

如果帮助到你，希望留下一个点赞。