lucky-canvas 前端抽奖组件：大转盘、九宫格与老虎机实现

作者：页面旅途时间：2026-10-25 12:12:39浏览：535

lucky-canvas 是一款基于 JavaScript 和 Canvas 的前端抽奖组件，支持大转盘、九宫格及老虎机模式。该组件具备高度可配置性，支持奖品、文字、图片及按钮的自由定制，并兼容同步与异步抽奖逻辑。其多端适配能力覆盖 Vue、React、微信小程序及 UniApp 等环境，且通过自动调整 DPR 及支持百分比布局，确保在不同设备上的显示清晰度与响应式效果。

lucky-canvas 介绍

这是一个基于 JavaScript 和 Canvas 技术构建的抽奖组件，涵盖大转盘、九宫格以及老虎机三种常见模式。其设计目标是为 Web 前端开发提供一套功能完善且稳定可靠的解决方案，用户只需进行简单的配置即可实现高度自由的定制化需求，从而高效地满足产品中的各类抽奖功能要求。

lucky-canvas 介绍

lucky-canvas 功能特点

自由配置

该组件支持对奖品、文字、图片、颜色及按钮等元素进行自由配置。抽奖过程既支持同步执行也支持异步逻辑，且中奖概率可以在前端和后端进行灵活控制，满足不同业务场景下的风控需求。

多端适配

在框架兼容性方面，lucky-canvas 支持原生 JavaScript、TypeScript、jQuery 以及主流前端框架如 Vue 和 React。此外，它还完美适配微信小程序、UniApp 和 Taro 等跨平台开发环境，确保在多种终端上使用时的表现效果完全一致。

响应式

组件能够自动根据设备的设备像素比（DPR）调整渲染清晰度，以保证视觉质量。同时，它支持使用百分比、rem 或 rpx 等属性来定义尺寸，从而更好地适配移动端的各种屏幕布局。

具体详细功能介绍 api 请看官网

下面我简单写了三个抽奖小 demo，大家可做参考。

代码块展示

这里使用掘金的码上掘金展示效果给大家看，ps:里边的图片因为引用的是本地所以不显示，可以看下面效果图的展示

https://code.juejin.cn/pen/7103522105597100039

效果图展示

图片是随便用的本地图片（懒得在网上找图片资源了），大家可自行替换成自己想要的图片哈，我这里就是简单实现一下demo。

lucky-canvas 介绍

代码如下

抽奖一

// 第一个抽奖
const myLucky = new LuckyCanvas.LuckyGrid('#my-lucky', {
    width: '300px',
    height: '300px',
    blocks: [
        { padding: '10px', background: '#869cfa' },
        { padding: '10px', background: '#e9e8fe' },
    ],
    prizes: [
        { x: 0, y: 0, fonts: [{ text: '谢谢参与', top: '40%' }], },
        { x: 1, y: 0, fonts: [{ text: '小米手环', top: '40%' }], },
        { x: 2, y: 0, fonts: [{ text: '苹果13', top: '40%' }], },
        { x: 2, y: 1, fonts: [{ text: '优惠券50', top: '40%' }], },
        { x: 2, y: 2, fonts: [{ text: '优惠券100', top: '40%' }], },
        { x: 1, y: 2, fonts: [{ text: '迷你小冰箱', top: '40%' }], },
        { x: 0, y: 2, fonts: [{ text: '腾讯会员', top: '40%' }], },
        { x: 0, y: 1, fonts: [{ text: '优酷会员', top: '40%' }], },
    ],
    buttons: [
        {
            x: 1, y: 1,
            background: '#9c9dd8',
            fonts: [{ text: '抽奖', top: '40%' }],
        },
    ],
    defaultStyle: {
        background: '#b8c5f2',
        fontSize: '14'
    },
    start: function () {
        // 开始游戏
        myLucky.play()
        // 使用定时器模拟接口
        setTimeout(() => {
            // 结束游戏, 并抽第0号奖品
            myLucky.stop(0)
        }, 3000)
    },
    end: function (event) {
        // 获取抽奖的值
        console.log(event)
    }
})

抽奖二

// 第二个抽奖
const prizeImg2 = {
    src: '../../img/icon1.png',
    activeSrc: '../../img/icon3.png',
    width: '50%',
    top: '25%'
}
const myLucky2 = new LuckyCanvas.LuckyGrid('#my-lucky2', {
    width: '300px',
    height: '300px',
    blocks: [
        { padding: '10px', background: '#869cfa' },
        { padding: '10px', background: '#e9e8fe' },
    ],
    prizes: [
        { x: 0, y: 0, imgs: [prizeImg2] },
        { x: 1, y: 0, imgs: [prizeImg2] },
        { x: 2, y: 0, imgs: [prizeImg2] },
        { x: 2, y: 1, imgs: [prizeImg2] },
        { x: 2, y: 2, imgs: [prizeImg2] },
        { x: 1, y: 2, imgs: [prizeImg2] },
        { x: 0, y: 2, imgs: [prizeImg2] },
        { x: 0, y: 1, imgs: [prizeImg2] },
    ],
    buttons: [
        {
            x: 1, y: 1,
            background: '#9c9dd8',
            fonts: [{ text: '抽奖', top: '40%' }],
        },
    ],
    defaultStyle: {
        background: '#b8c5f2'
    },
    start: function () {
        // 开始游戏
        myLucky2.play()
        // 使用定时器模拟接口
        setTimeout(() => {
            // 结束游戏, 并抽第0号奖品
            myLucky2.stop(0)
        }, 3000)
    },
    end: function (event) {
        // 获取抽奖的值
        console.log(event)
    }
})

抽奖三

// 第三个抽奖
const prizeImg3 = [
    {
        src: '../../img/icon1.png',
        width: '50%',
        top: '15%'
    },
    {
        src: '../../img/icon2.png',
        width: '50%',
        top: '15%'
    },
    {
        src: '../../img/icon3.png',
        width: '50%',
        top: '15%'
    },
    {
        src: '../../img/icon4.png',
        width: '50%',
        top: '15%'
    },
    {
        src: '../../img/icon5.png',
        width: '50%',
        top: '15%'
    },
    {
        src: '../../img/icon6.png',
        width: '50%',
        top: '15%'
    },
    {
        src: '../../img/icon1.png',
        width: '50%',
        top: '15%'
    },
    {
        src: '../../img/icon2.png',
        width: '50%',
        top: '15%'
    }
]
const myLucky3 = new LuckyCanvas.LuckyGrid('#my-lucky3', {
    width: '300px',
    height: '300px',
    blocks: [
        { padding: '10px', background: '#869cfa' },
        { padding: '10px', background: '#e9e8fe' },
    ],
    prizes: [
        { x: 0, y: 0, fonts: [{ text: '谢谢参与', top: '60%' }], imgs: [prizeImg3[0]] },
        { x: 1, y: 0, fonts: [{ text: '小米手环', top: '60%' }], imgs: [prizeImg3[1]] },
        { x: 2, y: 0, fonts: [{ text: '苹果13', top: '60%' }], imgs: [prizeImg3[2]] },
        { x: 2, y: 1, fonts: [{ text: '优惠券50', top: '60%' }], imgs: [prizeImg3[3]] },
        { x: 2, y: 2, fonts: [{ text: '优惠券100', top: '60%' }], imgs: [prizeImg3[4]] },
        { x: 1, y: 2, fonts: [{ text: '迷你小冰箱', top: '60%' }], imgs: [prizeImg3[5]] },
        { x: 0, y: 2, fonts: [{ text: '腾讯会员', top: '60%' }], imgs: [prizeImg3[6]] },
        { x: 0, y: 1, fonts: [{ text: '优酷会员', top: '60%' }], imgs: [prizeImg3[7]] },
    ],
    buttons: [
        {
            x: 1, y: 1,
            background: '#9c9dd8',
            fonts: [{ text: '抽奖', top: '40%' }],
        },
    ],
    defaultStyle: {
        background: '#b8c5f2',
        fontSize: '14'
    },
    start: function () {
        // 开始游戏
        myLucky3.play()
        // 使用定时器模拟接口
        setTimeout(() => {
            // 结束游戏, 并抽第0号奖品
            myLucky3.stop(0)
        }, 3000)
    },
    end: function (event) {
        // 获取抽奖的值
        console.log(event)
    }
})

到此这篇关于基于JS+Canvas的lucky-canvas 抽奖功能的文章就介绍到这了,更多相关lucky canvas 抽奖内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JS监听滚动事件：回到顶部按钮的显示与隐藏逻辑

2026-11-05 16:19:37

JavaScript怎么读写LocalStorage与SessionStorage

2026-11-05 15:40:11

anime.js 与 GSAP 对比：轻量级项目该怎么选择动画库

2026-11-05 11:24:55

flv.js 与 hls.js 在直播场景下的选型对比

2026-11-05 08:18:52

JavaScript能做什么？前端开发中的作用与应用场景解析

2026-11-04 23:17:54