Web前端 lucky-canvas【大转盘 & 九宫格 & 老虎机】抽奖插件（适用JS/TS、Vue、React、微信小程序、Uniapp和Taro）

已于 2024-09-04 14:31:51 修改
阅读量210 收藏 5
点赞数 5
文章标签： 前端 javascript vue.js
于 2024-09-04 14:30:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miaomiaowins/article/details/141853043
版权

Web前端 lucky-canvas 抽奖插件（JS/TS、Vue、React、微信小程序、Uniapp和Taro）

基于 JS + Canvas 实现的【大转盘 & 九宫格 & 老虎机】抽奖，致力于为 WEB 前端提供一个功能强大且专业可靠的营销组件，只需要通过简单配置即可实现自由化定制，帮助你快速的完成产品需求

  1. 自由配置
    奖品 / 文字 / 图片 / 颜色 / 按钮均可自由配置；支持同步 / 异步抽奖；中奖概率前 / 后端可控
  2. 多端适配
    支持 JS / TS / JQ / Vue / React / 微信小程序 / UniApp / Taro 等；并且多端使用 / 表现形式完全一致
  3. 响应式
    自动根据设备 dpr 调整清晰度；并支持使用 百分比 / rem / rpx 属性来适配移动端布局

在这里插入图片描述
更多自定义样式：

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

1-1. 在JS/TS中使用：

方式1：通过 script 标签引入，CDN 链接任选一个即可

  • unpkg：https://unpkg.com/lucky-canvas@1.7.25

  • jsdelivr：https://cdn.jsdelivr.net/npm/lucky-canvas@1.7.25

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="my-luckyWheel"></div>
    <div id="my-luckyGrid"></div>
    <div onclick="playGame()" id="my-slotMachine"></div>
</body>
<script src="https://unpkg.com/lucky-canvas@1.7.25"></script>
<script>
    # 大转盘
    const luckyWheel = new LuckyCanvas.LuckyWheel('#my-luckyWheel', {
      width: '250px',
      height: '250px',
      blocks: [{ padding: '10px', background: '#617df2' }],
      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: '35%',
        background: '#8a9bf3',
        pointer: true,
        fonts: [{ text: '开始', top: '-10px' }]
      }],
      start: function () {
        // 开始游戏
        luckyWheel.play()
        // 使用定时器模拟接口
        setTimeout(() => {
          // 结束游戏
          luckyWheel.stop(0)
        }, 3000)
      }
    })


    # 九宫格
    const luckyGrid = new LuckyCanvas.LuckyGrid('#my-luckyGrid', {
    width: '200px',
    height: '200px',
    blocks: [
      { padding: '10px', background: '#869cfa' },
      { padding: '10px', background: '#e9e8fe' },
    ],
    prizes: [
      { x: 0, y: 0 },
      { x: 1, y: 0 },
      { x: 2, y: 0 },
      { x: 2, y: 1 },
      { x: 2, y: 2 },
      { x: 1, y: 2 },
      { x: 0, y: 2 },
      { x: 0, y: 1 },
    ],
    buttons: [
      {
        x: 1, y: 1,
        background: '#9c9dd8',
        fonts: [{ text: '开始', top: '25%' }],
      },
    ],
    defaultStyle: {
      background: '#b8c5f2'
    },
    start: function () {
      // 开始游戏
      luckyGrid.play()
      // 使用定时器模拟接口
      setTimeout(() => {
        // 结束游戏, 并抽第0号奖品
        luckyGrid.stop(0)
      }, 3000)
    }
  })


  # 老虎机
  const slotMachine = new LuckyCanvas.SlotMachine('#my-slotMachine', {
    width: '240px',
    height: '180px',
    blocks: [
      { padding: '10px', background: '#869cfa' },
      { padding: '10px', background: '#e9e8fe' },
    ],
    slots: [
      { order: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], direction: 1 },
      { order: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0], direction: -1 },
      { order: [2, 3, 4, 5, 6, 7, 8, 9, 0, 1], direction: 1 },
    ],
    prizes: [
      { fonts: [{ text: '0', top: '15%' }] },
      { fonts: [{ text: '1', top: '15%' }] },
      { fonts: [{ text: '2', top: '15%' }] },
      { fonts: [{ text: '3', top: '15%' }] },
      { fonts: [{ text: '4', top: '15%' }] },
      { fonts: [{ text: '5', top: '15%' }] },
      { fonts: [{ text: '6', top: '15%' }] },
      { fonts: [{ text: '7', top: '15%' }] },
      { fonts: [{ text: '8', top: '15%' }] },
      { fonts: [{ text: '9', top: '15%' }] },
    ],
    defaultStyle: {
      borderRadius: Infinity,
      background: '#bac5ee',
      fontSize: '32px',
      fontColor: '#333'
    },
    defaultConfig: {
      rowSpacing: '20px',
      colSpacing: '10px'
    },
    end (prize) {
      // console.log(prize)
    }
  })
  // 开始游戏
  const playGame = () => {
    slotMachine.play()
    setTimeout(() => {
      // 假设 4 种结果
      const res = [
        [9, 9, 6],
        [0, 0, 7],
        [6, 6, 6],
        [8, 8, 8]
      ]
      // 随机取一组数据
      const index = res[Math.random() * 4 >> 0]
      // 调用 stop 方法停止游戏
      slotMachine.stop(index)
    }, 500);
  }
  </script>
  
</html>

方式 2：通过 import 引入

# npm 安装
npm install lucky-canvas@latest

# 或者 yarn 安装
yarn add lucky-canvas@latest

<div id="my-luckyWheel"></div>
<div id="my-luckyGrid"></div>
<div onclick="playGame()" id="my-slotMachine"></div>

<script>
import { LuckyWheel,LuckyGrid,SlotMachine } from 'lucky-canvas'

# 大转盘
 const myLucky = new LuckyWheel('#my-luckyWheel', {
   width: '200px',
   height: '200px',
   blocks: [{ padding: '13px', background: '#617df2' }],
   prizes: [
     { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
     { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
     { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
     { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
     { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
     { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
   ],
 })

# 九宫格
 const luckyGrid = new LuckyGrid('#my-luckyGrid', {
    width: '200px',
    height: '200px',
    blocks: [
      { padding: '10px', background: '#869cfa' },
      { padding: '10px', background: '#e9e8fe' },
    ],
    prizes: [
      { x: 0, y: 0 },
      { x: 1, y: 0 },
      { x: 2, y: 0 },
      { x: 2, y: 1 },
      { x: 2, y: 2 },
      { x: 1, y: 2 },
      { x: 0, y: 2 },
      { x: 0, y: 1 },
    ],
    buttons: [
      {
        x: 1, y: 1,
        background: '#9c9dd8',
        fonts: [{ text: '开始', top: '25%' }],
      },
    ],
    defaultStyle: {
      background: '#b8c5f2'
    },
    start: function () {
      // 开始游戏
      luckyGrid.play()
      // 使用定时器模拟接口
      setTimeout(() => {
        // 结束游戏, 并抽第0号奖品
        luckyGrid.stop(0)
      }, 3000)
    }
  })

# 老虎机
  const slotMachine = new SlotMachine('#my-slotMachine', {
    width: '240px',
    height: '180px',
    blocks: [
      { padding: '10px', background: '#869cfa' },
      { padding: '10px', background: '#e9e8fe' },
    ],
    slots: [
      { order: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], direction: 1 },
      { order: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0], direction: -1 },
      { order: [2, 3, 4, 5, 6, 7, 8, 9, 0, 1], direction: 1 },
    ],
    prizes: [
      { fonts: [{ text: '0', top: '15%' }] },
      { fonts: [{ text: '1', top: '15%' }] },
      { fonts: [{ text: '2', top: '15%' }] },
      { fonts: [{ text: '3', top: '15%' }] },
      { fonts: [{ text: '4', top: '15%' }] },
      { fonts: [{ text: '5', top: '15%' }] },
      { fonts: [{ text: '6', top: '15%' }] },
      { fonts: [{ text: '7', top: '15%' }] },
      { fonts: [{ text: '8', top: '15%' }] },
      { fonts: [{ text: '9', top: '15%' }] },
    ],
    defaultStyle: {
      borderRadius: Infinity,
      background: '#bac5ee',
      fontSize: '32px',
      fontColor: '#333'
    },
    defaultConfig: {
      rowSpacing: '20px',
      colSpacing: '10px'
    },
    end (prize) {
      // console.log(prize)
    }
  })
  // 开始游戏
  const playGame = () => {
    slotMachine.play()
    setTimeout(() => {
      // 假设 4 种结果
      const res = [
        [9, 9, 6],
        [0, 0, 7],
        [6, 6, 6],
        [8, 8, 8]
      ]
      // 随机取一组数据
      const index = res[Math.random() * 4 >> 0]
      // 调用 stop 方法停止游戏
      slotMachine.stop(index)
    }, 500);
  }
</script>
1-2. 在Vue中使用：

方式 1：通过 import 引入

1.首先安装插件

# npm 安装
npm install @lucky-canvas/vue@latest

# 或者 yarn 安装
yarn add @lucky-canvas/vue@latest

2.在main.js 引入插件

# Vue2
import VueLuckyCanvas from '@lucky-canvas/vue'
Vue.use(VueLuckyCanvas)

# Vue3
import VueLuckyCanvas from '@lucky-canvas/vue'
createApp(App).use(VueLuckyCanvas).mount('#app')

3.在组件上使用

Vue2 ：

<template>
  <LuckyWheel
    ref="myLuckyWheel"
    width="250px"
    height="250px"
    :prizes="myLuckyWheel.prizes"
    :blocks="myLuckyWheel.blocks"
    :buttons="myLuckyWheel.buttons"
    @start="startLuckyWheel"
    @end="endLuckyWheel"
  />
  <LuckyGrid
    ref="myLuckyGrid"
    width="200px"
    height="200px"
    :prizes="myLuckyGrid.prizes"
    :blocks="myLuckyGrid.blocks"
    :buttons="myLuckyGrid.buttons"
    :defaultStyle="myLuckyGrid.defaultStyle"
    @start="startLuckyGrid"
    @end="endLuckyGrid"
  />

  <SlotMachine
    ref="mySlotMachine"
    width="240px"
    height="180px"
    :blocks="mySlotMachine.blocks"
    :slots="mySlotMachine.slots"
    :prizes="mySlotMachine.prizes"
    :defaultStyle="mySlotMachine.defaultStyle"
    :defaultConfig="mySlotMachine.defaultConfig"
    @click="startSlotMachine"
    @end="endSlotMachine"
  />
</template>

<script>
export default {
  data() {
    return {
      // 大转盘
      myLuckyWheel: {
        blocks: [{ padding: "13px", background: "#617df2" }],
        prizes: [
          { fonts: [{ text: "0", top: "10%" }], background: "#e9e8fe" },
          { fonts: [{ text: "1", top: "10%" }], background: "#b8c5f2" },
          { fonts: [{ text: "2", top: "10%" }], background: "#e9e8fe" },
          { fonts: [{ text: "3", top: "10%" }], background: "#b8c5f2" },
          { fonts: [{ text: "4", top: "10%" }], background: "#e9e8fe" },
          { fonts: [{ text: "5", top: "10%" }], background: "#b8c5f2" },
        ],
        buttons: [
          {
            radius: "35%",
            background: "#8a9bf3",
            pointer: true,
            fonts: [{ text: "开始", top: "-10px" }],
          },
        ],
      },

	  // 九宫格
      myLuckyGrid: {
        blocks: [
          { padding: "10px", background: "#869cfa" },
          { padding: "10px", background: "#e9e8fe" },
        ],
        prizes: [
          { x: 0, y: 0 },
          { x: 1, y: 0 },
          { x: 2, y: 0 },
          { x: 2, y: 1 },
          { x: 2, y: 2 },
          { x: 1, y: 2 },
          { x: 0, y: 2 },
          { x: 0, y: 1 },
        ],
        buttons: [
          {
            x: 1,
            y: 1,
            background: "#9c9dd8",
            fonts: [{ text: "开始", top: "25%" }],
          },
        ],
        defaultStyle: {
          background: "#b8c5f2",
        },
      },

	  // 老虎机
      mySlotMachine: {
        blocks: [
          { padding: "10px", background: "#869cfa" },
          { padding: "10px", background: "#e9e8fe" },
        ],
        slots: [
          { order: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], direction: 1 },
          { order: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0], direction: -1 },
          { order: [2, 3, 4, 5, 6, 7, 8, 9, 0, 1], direction: 1 },
        ],
        prizes: [
          { fonts: [{ text: "0", top: "15%" }] },
          { fonts: [{ text: "1", top: "15%" }] },
          { fonts: [{ text: "2", top: "15%" }] },
          { fonts: [{ text: "3", top: "15%" }] },
          { fonts: [{ text: "4", top: "15%" }] },
          { fonts: [{ text: "5", top: "15%" }] },
          { fonts: [{ text: "6", top: "15%" }] },
          { fonts: [{ text: "7", top: "15%" }] },
          { fonts: [{ text: "8", top: "15%" }] },
          { fonts: [{ text: "9", top: "15%" }] },
        ],
        defaultStyle: {
          borderRadius: Infinity,
          background: "#bac5ee",
          fontSize: "32px",
          fontColor: "#333",
        },
        defaultConfig: {
          rowSpacing: "20px",
          colSpacing: "10px",
        },
      },
    };
  },
  methods: {
    // 大转盘
    startLuckyWheel() {
      this.$refs.myLuckyWheel.play();
      setTimeout(() => {
        const index = 0;
        this.$refs.myLuckyWheel.stop(index);
      }, 3000);
    },
    endLuckyWheel(prize) {
      console.log(prize);
    },

    // 九宫格
    startLuckyGrid() {
      this.$refs.myLuckyGrid.play();
      setTimeout(() => {
        this.$refs.myLuckyGrid.stop(0);
      }, 3000);
    },
    endLuckyGrid(prize) {
      console.log(prize);
    },

    // 老虎机
    startSlotMachine() {
      this.$refs.mySlotMachine.play();
      setTimeout(() => {
        // 假设 4 种结果
        const res = [
          [9, 9, 6],
          [0, 0, 7],
          [6, 6, 6],
          [8, 8, 8],
        ];
        // 随机取一组数据
        const index = res[(Math.random() * 4) >> 0];
        // 调用 stop 方法停止游戏
        this.$refs.mySlotMachine.stop(index);
      }, 500);
    },
    endSlotMachine(prize) {
      console.log(prize);
    },
  },
};
</script>

Vue3 版本：

<template>
  <LuckyWheel
    ref="myLuckyWheel"
    width="250px"
    height="250px"
    :prizes="myLuckyWheel.prizes"
    :blocks="myLuckyWheel.blocks"
    :buttons="myLuckyWheel.buttons"
    @start="startLuckyWheel"
    @end="endLuckyWheel"
  />
  <LuckyGrid
    ref="myLuckyGrid"
    width="200px"
    height="200px"
    :prizes="myLuckyGrid.prizes"
    :blocks="myLuckyGrid.blocks"
    :buttons="myLuckyGrid.buttons"
    :defaultStyle="myLuckyGrid.defaultStyle"
    @start="startLuckyGrid"
    @end="endLuckyGrid"
  />

  <SlotMachine
    ref="mySlotMachine"
    width="240px"
    height="180px"
    :blocks="mySlotMachine.blocks"
    :slots="mySlotMachine.slots"
    :prizes="mySlotMachine.prizes"
    :defaultStyle="mySlotMachine.defaultStyle"
    :defaultConfig="mySlotMachine.defaultConfig"
    @click="startSlotMachine"
    @end="endSlotMachine"
  />
</template>

<script setup>
import { ref } from "vue";

// 大转盘
const myLuckyWheel = ref({
  blocks: [{ padding: "13px", background: "#617df2" }],
  prizes: [
    { fonts: [{ text: "0", top: "10%" }], background: "#e9e8fe" },
    { fonts: [{ text: "1", top: "10%" }], background: "#b8c5f2" },
    { fonts: [{ text: "2", top: "10%" }], background: "#e9e8fe" },
    { fonts: [{ text: "3", top: "10%" }], background: "#b8c5f2" },
    { fonts: [{ text: "4", top: "10%" }], background: "#e9e8fe" },
    { fonts: [{ text: "5", top: "10%" }], background: "#b8c5f2" },
  ],
  buttons: [
    {
      radius: "35%",
      background: "#8a9bf3",
      pointer: true,
      fonts: [{ text: "开始", top: "-10px" }],
    },
  ],
});
const startLuckyWheel = () => {
  // 调用抽奖组件的play方法开始游戏
  myLuckyWheel.value.play();
  // 模拟调用接口异步抽奖
  setTimeout(() => {
    // 假设后端返回的中奖索引是0
    const index = 0;
    // 调用stop停止旋转并传递中奖索引
    myLuckyWheel.value.stop(index);
  }, 3000);
};
const endLuckyWheel = (prize) => {
  console.log(prize);
};

// 九宫格
const myLuckyGrid = ref({
  blocks: [
    { padding: "10px", background: "#869cfa" },
    { padding: "10px", background: "#e9e8fe" },
  ],
  prizes: [
    { x: 0, y: 0 },
    { x: 1, y: 0 },
    { x: 2, y: 0 },
    { x: 2, y: 1 },
    { x: 2, y: 2 },
    { x: 1, y: 2 },
    { x: 0, y: 2 },
    { x: 0, y: 1 },
  ],
  buttons: [
    {
      x: 1,
      y: 1,
      background: "#9c9dd8",
      fonts: [{ text: "开始", top: "25%" }],
    },
  ],
  defaultStyle: {
    background: "#b8c5f2",
  },
});
const startLuckyGrid = () => {
  myLuckyGrid.value.play();
  setTimeout(() => {
    myLuckyGrid.value.stop(0);
  }, 3000);
};
const endLuckyGrid = (prize) => {
  console.log(prize);
};

// 老虎机
const mySlotMachine = ref({
  blocks: [
    { padding: "10px", background: "#869cfa" },
    { padding: "10px", background: "#e9e8fe" },
  ],
  slots: [
    { order: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], direction: 1 },
    { order: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0], direction: -1 },
    { order: [2, 3, 4, 5, 6, 7, 8, 9, 0, 1], direction: 1 },
  ],
  prizes: [
    { fonts: [{ text: "0", top: "15%" }] },
    { fonts: [{ text: "1", top: "15%" }] },
    { fonts: [{ text: "2", top: "15%" }] },
    { fonts: [{ text: "3", top: "15%" }] },
    { fonts: [{ text: "4", top: "15%" }] },
    { fonts: [{ text: "5", top: "15%" }] },
    { fonts: [{ text: "6", top: "15%" }] },
    { fonts: [{ text: "7", top: "15%" }] },
    { fonts: [{ text: "8", top: "15%" }] },
    { fonts: [{ text: "9", top: "15%" }] },
  ],
  defaultStyle: {
    borderRadius: Infinity,
    background: "#bac5ee",
    fontSize: "32px",
    fontColor: "#333",
  },
  defaultConfig: {
    rowSpacing: "20px",
    colSpacing: "10px",
  },
});
const startSlotMachine = () => {
  mySlotMachine.value.play();
  setTimeout(() => {
    // 假设 4 种结果
    const res = [
      [9, 9, 6],
      [0, 0, 7],
      [6, 6, 6],
      [8, 8, 8],
    ];
    // 随机取一组数据
    const index = res[(Math.random() * 4) >> 0];
    // 调用 stop 方法停止游戏
    mySlotMachine.value.stop(index);
  }, 500);
};
const endSlotMachine = (prize) => {
  console.log(prize);
};
</script>

对于出现安装/打包失败 https://github.com/buuing/lucky-canvas/issues/258(opens new window)
可能是依赖安装问题导致的, 建议切换 node@12.22.7
然后删除 node_modules 和 **-lock.json 这两个文件
再次尝试 npm install 安装所有依赖

如果还是无法使用, 你可以直接跳转 ->【在 JS / TS 中使用】并查看方式2(这个包不会出现依赖问题, 因为他没有任何依赖)

1-3. 在React中使用（示例：LuckyWheel ）：

1.首先安装插件

# npm 安装：
npm install @lucky-canvas/react@latest

# yarn 安装：
yarn add @lucky-canvas/react@latest

2.在组件中使用

import React, { useState, useRef } from 'react'
import { LuckyWheel,LuckyGrid,SlotMachine } from '@lucky-canvas/react'

export default function App() {
  const [blocks] = useState([
    { padding: '10px', background: '#869cfa' }
  ])
  const [prizes] = useState([
    { 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' }] },
  ])
  const [buttons] = useState([
    { radius: '40%', background: '#617df2' },
    { radius: '35%', background: '#afc8ff' },
    {
      radius: '30%', background: '#869cfa',
      pointer: true,
      fonts: [{ text: '开始', top: '-10px' }]
    }
  ])
  const myLucky = useRef()
  return <div>
    <LuckyWheel
      ref={myLucky}
      width="300px"
      height="300px"
      blocks={blocks}
      prizes={prizes}
      buttons={buttons}
      onStart={() => { // 点击抽奖按钮会触发star回调
        myLucky.current.play()
        setTimeout(() => {
          const index = Math.random() * 6 >> 0
          myLucky.current.stop(index)
        }, 2500)
      }}
      onEnd={prize => { // 抽奖结束会触发end回调
        alert('恭喜你抽到 ' + prize.fonts[0].text + ' 号奖品')
      }}
    />
  </div>
}
1-4. 在微信小程序中使用（示例：LuckyWheel ）：

1.查看小程序项目根目录下是否有package.json文件，没有再执行下面的命令来创建该文件

npm init -y

2.安装 npm 包

npm install @lucky-canvas/mini@latest

3.构建 npm

  • 微信开发者工具 -> 找到左上角
  • 点击 -> 工具
  • 点击 -> 构建 npm 弹窗提示 构建成功 即可!

4.引入自定义组件

json文件：

{
  ...
  "usingComponents": {
     "lucky-wheel": "/miniprogram_npm/@lucky-canvas/mini/lucky-wheel/index",
    "lucky-grid": "/miniprogram_npm/@lucky-canvas/mini/lucky-grid/index"
    "slot-machine": "/miniprogram_npm/@lucky-canvas/mini/slot-machine/index"
  }
  ...
}

wxml文件：

<view>
  <lucky-wheel
    id="myLucky"
    width="600rpx"
    height="600rpx"
    blocks="{{blocks}}"
    prizes="{{prizes}}"
    buttons="{{buttons}}"
    bindstart="start"
    bindend="end"
  />
</view>

js文件：

const app = getApp()
Page({
  data: {
    blocks: [{ padding: '13px', background: '#617df2' }],
    prizes: [
      { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
      { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
      { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
      { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
      { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
      { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
    ],
    buttons: [
      { radius: '50px', background: '#617df2' },
      { radius: '45px', background: '#afc8ff' },
      {
        radius: '40px', background: '#869cfa',
        pointer: true,
        fonts: [{ text: '开始\n抽奖', top: '-20px' }]
      },
    ],
  },
  start () {
    // 获取抽奖组件实例
    const child = this.selectComponent('#myLucky')
    // 调用play方法开始旋转
    child.lucky.play()
    // 用定时器模拟请求接口
    setTimeout(() => {
      // 3s 后得到中奖索引 (假设抽到第0个奖品)
      const index = 0
      // 调用stop方法然后缓慢停止
      child.lucky.stop(index)
    }, 3000)
  },
  end (event) {
    // 中奖奖品详情
    console.log(event.detail)
  }
})
1-5. 在UniApp中使用（示例：LuckyWheel ）：

1.安装插件

  • 你可以选择通过 HBuilderX 导入插件： https://ext.dcloud.net.cn/plugin?id=3499
  • 也可以选择通过 npm / yarn 安装
# npm 安装：
npm install @lucky-canvas/uni@latest

# yarn 安装：
yarn add @lucky-canvas/uni@latest

2.引入并使用

<template>
  <view>
    <LuckyWheel
      ref="myLucky"
      width="600rpx"
      height="600rpx"
      :blocks="blocks"
      :prizes="prizes"
      :buttons="buttons"
      :defaultStyle="defaultStyle"
      @start="startCallBack"
      @end="endCallBack"
    />
  </view>
</template>

<script>
 // npm 下载会默认到 node_modules 里面，直接引入包名即可
  import LuckyWheel from '@lucky-canvas/uni/lucky-wheel' // 大转盘
  import LuckyGrid from '@lucky-canvas/uni/lucky-grid' // 九宫格
  import SlotMachine from '@lucky-canvas/uni/slot-machine' // 老虎机

  // 如果你是通过 HBuilderX 导入插件，那你需要指定一下路径
  // import LuckyWheel from '@/components/@lucky-canvas/uni/lucky-wheel' // 大转盘
  // import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid' // 九宫格
  // import SlotMachine from '@/components/@lucky-canvas/uni/slot-machin' // 老虎机

  export default {
    components: { LuckyWheel, LuckyGrid, SlotMachine },
    data () {
      return {
        blocks: [{ padding: '13px', background: '#617df2' }],
        prizes: [
          { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
          { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
          { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
          { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
          { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
          { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
        ],
        buttons: [
          { radius: '50px', background: '#617df2' },
          { radius: '45px', background: '#afc8ff' },
          {
            radius: '40px', background: '#869cfa',
            pointer: true,
            fonts: [{ text: '开始\n抽奖', top: '-20px' }]
          },
        ],
      }
    },
    methods: {
      // 点击抽奖按钮触发回调
      startCallBack () {
        // 先开始旋转
        this.$refs.myLucky.play()
        // 使用定时器来模拟请求接口
        setTimeout(() => {
          // 假设后端返回的中奖索引是0
          const index = 0
          // 调用stop停止旋转并传递中奖索引
          this.$refs.myLucky.stop(index)
        }, 3000)
      },
      // 抽奖结束触发回调
      endCallBack (prize) {
        // 奖品详情
        console.log(prize)
      }
    }
  }
</script>
1-6. 在 Taro 中使用（示例：LuckyWheel ）：

1.安装

# npm 安装：
npm install @lucky-canvas/taro@latest

# yarn 安装：
yarn add @lucky-canvas/taro@latest

2.使用

# Taro-vue2
<template>
  <view>
    <LuckyWheel
      ref="myLucky"
      width="600rpx"
      height="600rpx"
      :prizes="prizes"
      :blocks="blocks"
      :buttons="buttons"
      @start="startCallback"
      @end="endCallback"
    ></LuckyWheel>
  </view>
</template>

<script>
import { LuckyWheel } from '@lucky-canvas/taro/vue'
export default {
  components: { LuckyWheel },
  data () {
    return {
      blocks: [{ padding: '13px', background: '#617df2' }],
      prizes: [
        { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
      ],
      buttons: [
        { radius: '50px', background: '#617df2' },
        { radius: '45px', background: '#afc8ff' },
        {
          radius: '40px', background: '#869cfa',
          pointer: true,
          fonts: [{ text: '开始\n抽奖', top: '-20px' }]
        },
      ],
    }
  },
  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>

# Taro-vue3
<template>
  <view>
    <LuckyWheel
      ref="myLucky"
      width="600rpx"
      height="600rpx"
      :prizes="prizes"
      :blocks="blocks"
      :buttons="buttons"
      @start="startCallback"
      @end="endCallback"
    ></LuckyWheel>
  </view>
</template>

<script>
import { ref, reactive, toRefs } from 'vue'
import { LuckyWheel } from '@lucky-canvas/taro/vue'
export default {
  components: { LuckyWheel },
  setup () {
    const myLucky = ref(null)
    const state = reactive({
      blocks: [{ padding: '13px', background: '#617df2' }],
      prizes: [
        { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
      ],
      buttons: [
        { radius: '50px', background: '#617df2' },
        { radius: '45px', background: '#afc8ff' },
        {
          radius: '40px', background: '#869cfa',
          pointer: true,
          fonts: [{ text: '开始\n抽奖', top: '-20px' }]
        },
      ],
    })
    // 点击抽奖按钮会触发star回调
    function startCallback () {
      // 调用抽奖组件的play方法开始游戏
      myLucky.value.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        const index = 0
        // 调用stop停止旋转并传递中奖索引
        myLucky.value.stop(index)
      }, 3000)
    }
    // 抽奖结束会触发end回调
    function endCallback (prize) {
      console.log(prize)
    }
    return {
      ...toRefs(state),
      startCallback,
      endCallback,
      myLucky
    }
  }
}
</script>

# Taro-react
import React from 'react'
import { LuckyWheel } from '@lucky-canvas/taro/react'

export default class Index extends React.Component {
  constructor () {
    super()
    this.myLucky = React.createRef()
    this.state = {
      blocks: [{ padding: '13px', background: '#617df2' }],
      prizes: [
        { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
      ],
      buttons: [
        { radius: '50px', background: '#617df2' },
        { radius: '45px', background: '#afc8ff' },
        {
          radius: '40px', background: '#869cfa',
          pointer: true,
          fonts: [{ text: '开始\n抽奖', top: '-20px' }]
        },
      ],
    }
  }
  render () {
    return <LuckyWheel
      ref={this.myLucky}
      width='300px'
      height='300px'
      blocks={this.state.blocks}
      prizes={this.state.prizes}
      buttons={this.state.buttons}
      onStart={() => { // 点击抽奖按钮会触发star回调
        // 调用抽奖组件的play方法开始游戏
        this.myLucky.current.play()
        // 模拟调用接口异步抽奖
        setTimeout(() => {
          // 假设后端返回的中奖索引是0
          const index = 0
          // 调用stop停止旋转并传递中奖索引
          this.myLucky.current.stop(index)
        }, 2500)
      }}
      onEnd={prize => { // 抽奖结束会触发end回调
        console.log(prize)
      }}
    ></LuckyWheel>
  }
}

大转盘 < LuckyWheel /> 参数介绍：

在这里插入图片描述

九宫格 < LuckyGrid /> 参数介绍：

在这里插入图片描述

老虎机 < SlotMachine /> 参数介绍：

在这里插入图片描述
以上便是对 lucky-canvas 抽奖插件的具体介绍和简易Dome，有常用问题我们可以通过lucky-canvas官方文档去了解解决，而这个高度自定义的插件组件适合我们做活动项目中的抽奖组件，有兴趣的小伙伴们可以了解并学习下！

lucky-canvas 官网：https://100px.net/
lucky-canvas 中文文档：https://100px.net/docs/wheel.html
lucky-canvas github地址：https://github.com/buuing/lucky-canvas

miaomiaowins
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
全站开发好用vue库、API、框架 等好用网站合集
D_evin_的博客
11-15 2898
1.Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 https://element.eleme.io/#/zh-CN/component/menu 2.Vant 有赞前端团队开源的基于vue的移动端组件库 https://vant-contrib.gitee.io/vant/#/zh-CN/swipe 3.Mint UI 基于vue的移动端框架 http://mint-ui.github.io/docs/#/zh-cn2 4.Bootstrap 最受欢迎
vue2插件之@lucky-canvas/vue，大转盘、抽奖、老虎机
04-26
lucky-canvas-vue2插件.zip
【lucky-canvas插件】在Vue3实现大转盘&九宫格&老虎机抽奖
有事儿私信。
09-01 6445
平时做项目时常会遇到抽奖需求。如果一个一个原生手敲的话，很费时间。所以找到了一款抽奖插件——lucky-canvas，一个基于 JavaScript 的跨平台 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件。可以满足绝大部分的项目需求。（定制化高的话仍需原生手写）。本文将介绍该插件的使用方法，并以vue3项目举例。
抽奖（大转盘 & 九宫格 & 老虎机）实现
qq_31594665的博客
04-22 516
基于 JS + Canvas 实现的【大转盘 & 九宫格 & 老虎机】抽奖，通过简单配置即可实现自由化定制，帮助你快速的完成产品需求
抽奖！抽奖！抽奖！大转盘、九宫格、老虎机开放抽奖组件！
youyudehan的博客
06-27 1045
lucky-canvas 组件，只需要简单的配置需要的属性就可以制定自己需要的抽奖功能效果。
【vue uniapp 小程序抽奖转盘老虎机和九宫格】
m0_70095480的博客
07-23 3602
vue uniapp 小程序抽奖转盘老虎机和九宫格
探索 `lucky-canvas`：一款强大的跨平台抽奖插件
gitblog_01028的博客
08-09 739
探索 lucky-canvas：一款强大的跨平台抽奖插件 lucky-canvas???????????? 基于 TS + Canvas 开发的【大转盘 / 九宫格 / 老虎机】抽奖插件，???? 一套源码适配多端框架 JS / Vue / React / Taro / UniApp / 微信小程序等，???? 奖品 / 文字 / 图片 / 颜色 / 按钮均可配置，支持同步 / 异步抽奖，???? 概率前 / 后端可控，???? 自动根...
开源项目 lucky-canvas 使用教程
gitblog_01023的博客
08-09 876
开源项目 lucky-canvas 使用教程 lucky-canvas???????????? 基于 TS + Canvas 开发的【大转盘 / 九宫格 / 老虎机】抽奖插件，???? 一套源码适配多端框架 JS / Vue / React / Taro / UniApp / 微信小程序等，???? 奖品 / 文字 / 图片 / 颜色 / 按钮均可配置，支持同步 / 异步抽奖，???? 概率前 / 后端可控，???? 自动根据 dpr ...
Vue实现3*3九宫格抽奖（并拓展实现n*n多宫格抽奖）
前端小记
10-27 2696
3*3九宫格,4*4十二宫格，5*5十六宫格，n*n多宫格一套代码实现！
vue3移动端转盘抽奖
qq_62809806的博客
04-11 520
lucky-canvas插件，大转盘，老虎机，九宫格
如何实现h5的抽奖功能
weixin_53818172的博客
12-29 1052
仅供参考,基础样式修改可以查看官网文档修改。按需引入(就当前文件使用)
lucky-canvas::military_medal::military_medal::military_medal: 基于 TS + Canvas 封装的【大转盘 九宫格】抽奖插件，:rainbow: 一套源码适配多端框架 JS JQ Vue React Taro UniApp 微信小程序等，:artist_palette: 奖品 文字 图片 颜色 按钮均可配置，支持同步 异步抽奖，:bullseye: 概率前 后端可控，:rocket: 自动根据 dpr 调整清晰度适配移
08-03
一个基于 JavaScript 的 ( 大转盘 / 九宫格 ) 抽奖插件 · 官方文档 & Demo演示 中文： English：If anyone can help translate the document, please contact me ldq404@qq.com 适配框架 npm包 npm下载量 CDN...
:military_medal::military_medal::military_medal: 一个基于 vue2 / vue3 的【大转盘 / 九宫格】抽奖插件；-Vue.js开发
05-27
:military_medal::military_medal::military_medal: 一个基于 vue2 / vue3 的【大转盘 / 九宫格】抽奖插件；:party_popper: A lucky draw plug-in based on vue2 / vue3；:artist_palette: 奖品 / 文字 / 图片 / ...
react-native-signature-canvas：用于Android && IOS && expo的基于React Native Signature组件的WebView Canvas
02-05
React本机签名画布 对Android && IOS && expo的基于本地签名组件的Canvas进行React 支持Android，iOS和Expo 没有本地依赖项的纯JavaScript实现 经过RN 0.50测试 核心使用 只依靠React和React本机 生成签名的base...
Vue前端路由详解——以Ruoyi框架为案例学习
最新发布
警警的博客
09-03 703
Ruoyi框架前端路由通过Vue Router实现，支持静态路由和动态路由的配置，通过路由守卫实现权限控制等需求，采用路由懒加载提高应用性能，并通过路由元信息存储自定义信息。这些特性共同构成了Ruoyi框架前端路由的完整体系，为开发者提供了灵活、强大的路由管理能力。
前端的面试题
本人小可爱
08-30 746
【代码】前端的面试题。
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 402
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1681
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
js对象操作常用方法
m0_75276704的博客
09-02 482
2.构造函数创建 2.方括号 三、添加属性 四、删除属性 五、判断属性是否存在 1.in运算符 2.hasOwnProperty方法 六、遍历对象属性 1.for...in...循环 2.Object.keys，Object.values，Object.entries 七、深拷贝与浅拷贝 1.浅拷贝 2.深拷贝 八、合并对象 Object.assign 九、其他方法 1.Object.is() 比较两个
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值