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

2024-09-05 05:28
文章标签 九宫格 大转盘 插件 web lucky canvas 老虎机 js ts vue react 微信 uniapp taro 抽奖 前端 适用 程序 javascript frontend

本文主要是介绍Web前端 lucky-canvas【大转盘 九宫格 老虎机】抽奖插件（适用JS/TS、Vue、React、微信小程序、Uniapp和Taro），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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><LuckyWheelref="myLuckyWheel"width="250px"height="250px":prizes="myLuckyWheel.prizes":blocks="myLuckyWheel.blocks":buttons="myLuckyWheel.buttons"@start="startLuckyWheel"@end="endLuckyWheel"/><LuckyGridref="myLuckyGrid"width="200px"height="200px":prizes="myLuckyGrid.prizes":blocks="myLuckyGrid.blocks":buttons="myLuckyGrid.buttons":defaultStyle="myLuckyGrid.defaultStyle"@start="startLuckyGrid"@end="endLuckyGrid"/><SlotMachineref="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><LuckyWheelref="myLuckyWheel"width="250px"height="250px":prizes="myLuckyWheel.prizes":blocks="myLuckyWheel.blocks":buttons="myLuckyWheel.buttons"@start="startLuckyWheel"@end="endLuckyWheel"/><LuckyGridref="myLuckyGrid"width="200px"height="200px":prizes="myLuckyGrid.prizes":blocks="myLuckyGrid.blocks":buttons="myLuckyGrid.buttons":defaultStyle="myLuckyGrid.defaultStyle"@start="startLuckyGrid"@end="endLuckyGrid"/><SlotMachineref="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(() => {// 假设后端返回的中奖索引是0const 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><LuckyWheelref={myLucky}width="300px"height="300px"blocks={blocks}prizes={prizes}buttons={buttons}onStart={() => { // 点击抽奖按钮会触发star回调myLucky.current.play()setTimeout(() => {const index = Math.random() * 6 >> 0myLucky.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-wheelid="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><LuckyWheelref="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(() => {// 假设后端返回的中奖索引是0const 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><LuckyWheelref="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(() => {// 假设后端返回的中奖索引是0const index = 0// 调用stop停止旋转并传递中奖索引this.$refs.myLucky.stop(index)}, 3000)},// 抽奖结束会触发end回调endCallback (prize) {console.log(prize)},}
}
</script># Taro-vue3
<template><view><LuckyWheelref="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(() => {// 假设后端返回的中奖索引是0const 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 <LuckyWheelref={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(() => {// 假设后端返回的中奖索引是0const 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

这篇关于Web前端 lucky-canvas【大转盘 九宫格 老虎机】抽奖插件（适用JS/TS、Vue、React、微信小程序、Uniapp和Taro）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1138075。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
W外链微信推广短连接怎么做？

W外链微信推广短连接怎么做？

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时，首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值，还要能够激起人们的分享欲望。对于许多企业和个人来说，尤其是那些缺乏创意和写作能力的人来说，这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大，不同用户的需求和兴趣各异。因此，制作推广链接时需要精准定位目标受众，以便更有效地吸引他们点击并分享链接
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式（Singleton Pattern） 确保一个类只有一个实例，并提供一个全局访问点。 示例代码： class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)
阅读更多...
Java Web指的是什么

Java Web指的是什么

Java Web指的是使用Java技术进行Web开发的一种方式。Java在Web开发领域有着广泛的应用，主要通过Java EE（Enterprise Edition）平台来实现。  主要特点和技术包括： 1. Servlets和JSP：     Servlets 是Java编写的服务器端程序，用于处理客户端请求和生成动态网页内容。     JSP（JavaServer Pages）
阅读更多...
BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

目录   [web][极客大挑战 2019]Http 考点：Referer协议、UA协议、X-Forwarded-For协议 [web][HCTF 2018]admin 考点：弱密码字典爆破 四种方法：   [web][极客大挑战 2019]Http 考点：Referer协议、UA协议、X-Forwarded-For协议 访问环境 老规矩，我们先查看源代码
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2