开源前端抽奖插件lucky-canvas

Lucky-Canvas 是一款基于 JavaScript 和 Canvas 的开源抽奖前端组件，提供大转盘、九宫格等多种抽奖界面，支持多种前端框架和技术栈。

核心特性

1. 多抽奖模式支持：

   • 大转盘抽奖（LuckyWheel）
   • 九宫格抽奖（LuckyGrid）
   • 老虎机抽奖（SlotMachine）

2. 跨平台兼容：

   • 支持原生JS、JQuery、Vue、React等技术栈
   • 适配微信小程序、UniApp、Taro等移动端框架

3. 高度可定制：

   • 奖品、文字、图片、颜色、按钮均可自由配置
   • 支持同步/异步抽奖模式
   • 中奖概率前后端可控

4. 响应式设计：

   • 自动根据设备dpr调整清晰度
   • 支持百分比、rem、rpx等适配移动端布局

技术架构

Lucky-Canvas 基于以下技术构建：

• Canvas渲染：提供流畅的动画效果和更好的性能表现
• 模块化设计：支持AMD/CMD模块化加载
• 跨平台适配：通过抽象层实现多平台兼容

安装与使用

在Vue项目中使用

1. 安装：

npm install @lucky-canvas/vue@latest

2. 引入并注册：

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

3. 使用示例：

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

在React项目中使用

1. 安装：

npm install @lucky-canvas/react

2. 使用示例：

import { LuckyWheel } from '@lucky-canvas/react'

function App() {
  return (
    <LuckyWheel
      width="300px"
      height="300px"
      prizes={prizes}
      blocks={blocks}
      buttons={buttons}
      onStart={() => { /* 开始回调 */ }}
      onEnd={(prize) => { /* 结束回调 */ }}
    />
  )
}

原生JS使用

1. 引入脚本：

<script src="https://unpkg.com/lucky-canvas@1.7.25/dist/index.umd.js"></script>

2. 初始化：

const myLucky = new LuckyCanvas.LuckyWheel('#container', {
  width: '600px',
  height: '600px',
  prizes: [
    { background: '#e9e8fe', fonts: [{ text: '一等奖' }] },
    // 更多奖品配置...
  ],
  // 其他配置...
})

配置选项

基础配置

• width/height：设置抽奖组件尺寸（支持px/rem/百分比）
• blocks：背景块配置（padding, background等）
• prizes：奖品配置（背景色、文字、图片等）
• buttons：按钮配置（半径、背景色、指针等）

事件回调

• onStart：点击开始按钮时触发
• onEnd：抽奖结束时触发，返回中奖信息

高级功能

1. 异步抽奖：

   • 可在onStart回调中发起API请求获取中奖结果
   • 根据返回结果调用stop(index)方法停止转盘

2. 概率控制：

   • 通过range属性设置奖品区间，控制中奖概率
   • 示例：

     prizes: [
       { range: 2, background: '#e9e8fe', fonts: [{ text: '一等奖' }] }, // 2/6概率
       { range: 2, background: '#b8c5f2', fonts: [{ text: '二等奖' }] }, // 2/6概率
       { range: 0, background: '#e9e8fe', fonts: [{ text: '三等奖' }] }, // 0概率（不会中奖）
     ]
     

3. 可视化编辑器：

   • 官网提供可视化配置工具，可快速生成配置代码

4. 游戏开发：游戏内抽奖机制