本文主要是介绍Web前端 lucky-canvas【大转盘 九宫格 老虎机】抽奖插件(适用JS/TS、Vue、React、微信小程序、Uniapp和Taro),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
Web前端 lucky-canvas 抽奖插件(JS/TS、Vue、React、微信小程序、Uniapp和Taro)
基于 JS + Canvas 实现的【大转盘 & 九宫格 & 老虎机】抽奖,致力于为 WEB 前端提供一个功能强大且专业可靠的营销组件,只需要通过简单配置即可实现自由化定制,帮助你快速的完成产品需求
- 自由配置
奖品 / 文字 / 图片 / 颜色 / 按钮均可自由配置;支持同步 / 异步抽奖;中奖概率前 / 后端可控 - 多端适配
支持 JS / TS / JQ / Vue / React / 微信小程序 / UniApp / Taro 等;并且多端使用 / 表现形式完全一致 - 响应式
自动根据设备 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)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!