开源前端抽奖插件lucky-canvas

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

核心特性

1. 多抽奖模式支持：

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

   • 跨平台兼容：

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

     • 高度可定制：

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

       • 响应式设计：

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

技术架构

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

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

  安装与使用

  在Vue项目中使用

  1. 安装：

  npm install @lucky-canvas/vue@latest
  

  1. 引入并注册：

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

  1. 使用示例：

  在React项目中使用

  1. 安装：

  npm install @lucky-canvas/react
  

  1. 使用示例：

  import { LuckyWheel } from '@lucky-canvas/react'
  function App() {
    return (
       { /* 开始回调 */ }}
        onEnd={(prize) => { /* 结束回调 */ }}
      />
    )
  }
  

  原生JS使用

  1. 引入脚本：
  1. 初始化：

  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)方法停止转盘

         • 概率控制：

           • 通过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概率（不会中奖）
             ]
             

           • 可视化编辑器：

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

             • 游戏开发：游戏内抽奖机制