在 JS / TS 中使用

下面我提供了一个大转盘的简易 Demo, 你可以用来测试. 至于其他抽奖类型或更多的效果, 可以跳转示例页面进行查看

方式 1：通过 script 标签引入

CDN 链接

• unpkg：https://unpkg.com/lucky-canvas@1.7.25
• jsdelivr：https://cdn.jsdelivr.net/npm/lucky-canvas@1.7.25

这里我提供 jsdelivr 或 unpkg 的 CDN 链接, 你随便选一个即可

方式 2：通过 import 引入

1. 安装

# npm 安装
npm install lucky-canvas@latest

# 或者 yarn 安装
yarn add lucky-canvas@latest

2. 使用

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

import { LuckyWheel, LuckyGrid } from 'lucky-canvas'

// 大转盘简易 Demo
const myLucky = new LuckyWheel('#my-lucky', {
  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' },
  ],
})