4.6k stars的前端抽奖(大转盘,老虎机,九宫格)组件拿去用

小半 • 2022年11月3日下午8:05 • 开源速递 • 阅读 1308

微信公众号:[开源日记],分享10k+Start的优质开源项目。

lucky-canvas 抽奖插件,一个基于 JavaScript 的跨平台 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件

GitHub数据

4.6k stars
30 watching
610 forks

开源地址:https://github.com/buuing/lucky-canvas

功能特点

基于 TS + Canvas 开发的,适配 JS / Vue / React / Taro / UniApp / 微信小程序等框架。

仿中欧基金大转盘
仿潘德妈妈大转盘
仿京东大转盘抽京豆
仿携程转盘抽奖
仿bilibili抽奖
仿抖音九宫格抽奖
仿网易严选九宫格
仿网易云游戏九宫格
仿新东方小程序抽奖
仿雪球九宫格抽奖
仿好未来九宫格抽奖
仿咸鱼游戏圆形九宫格
仿艺气山九宫格抽奖
仿抖音抽盲盒(老虎机)
仿滴滴老虎机抽奖

奖品 / 文字 / 图片 / 颜色 / 按钮均可配置
支持同步 / 异步抽奖
概率前 / 后端可控
自动根据 dpr 调整清晰度适配移动端

插件下载使用量

简单使用

在这里我们就在html,JavaScript中简单使用一下。

<div id="my-lucky"></div>

<script src="https://unpkg.com/lucky-canvas@1.7.25"></script>
<script>
  const myLucky = new LuckyCanvas.LuckyWheel('#my-lucky', {
    width: '300px',
    height: '300px',
    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 () {
      // 开始游戏
      myLucky.play()
      // 使用定时器模拟接口
      setTimeout(() => {
        // 结束游戏
        myLucky.stop(0)
      }, 3000)
    }
  })
</script>