一個(gè)基于 Js + Canvas 的【大轉(zhuǎn)盤 & 九宮格 & 老虎機(jī)】抽獎(jiǎng)，致力于為 web 前端提供一個(gè)功能強(qiáng)大且專業(yè)可靠的組件，只需要通過簡單配置即可實(shí)現(xiàn)自由化定制，幫助你快速的完成產(chǎn)品需求。

lucky-canvas 功能特點(diǎn)

自由配置

獎(jiǎng)品 / 文字 / 圖片 / 顏色 / 按鈕均可自由配置；支持同步 / 異步抽獎(jiǎng)；中獎(jiǎng)概率前 / 后端可控

多端適配

支持 JS / TS / JQ / Vue / React / 微信小程序 / UniApp / Taro 等；并且多端使用 / 表現(xiàn)形式完全一致

響應(yīng)式

自動(dòng)根據(jù)設(shè)備 dpr 調(diào)整清晰度；并支持使用百分比 / rem / rpx 屬性來適配移動(dòng)端布局

具體詳細(xì)功能介紹api請(qǐng)看官網(wǎng)

下面我簡單寫了三個(gè)抽獎(jiǎng)小demo，大家可做參考。

代碼塊展示

這里使用掘金的碼上掘金展示效果給大家看，ps:里邊的圖片因?yàn)橐玫氖潜镜厮圆伙@示，可以看下面效果圖的展示

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

效果圖展示

圖片是隨便用的本地圖片（懶得在網(wǎng)上找圖片資源了），大家可自行替換成自己想要的圖片哈，我這里就是簡單實(shí)現(xiàn)一下demo。

代碼如下

抽獎(jiǎng)一

// 第一個(gè)抽獎(jiǎng)
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: '小米手環(huán)', top: '40%' }], },
        { x: 2, y: 0, fonts: [{ text: '蘋果13', top: '40%' }], },
        { x: 2, y: 1, fonts: [{ text: '優(yōu)惠券50', top: '40%' }], },
        { x: 2, y: 2, fonts: [{ text: '優(yōu)惠券100', top: '40%' }], },
        { x: 1, y: 2, fonts: [{ text: '迷你小冰箱', top: '40%' }], },
        { x: 0, y: 2, fonts: [{ text: '騰訊會(huì)員', top: '40%' }], },
        { x: 0, y: 1, fonts: [{ text: '優(yōu)酷會(huì)員', top: '40%' }], },
    ],
    buttons: [
        {
            x: 1, y: 1,
            background: '#9c9dd8',
            fonts: [{ text: '抽獎(jiǎng)', top: '40%' }],
        },
    ],
    defaultStyle: {
        background: '#b8c5f2',
        fontSize: '14'
    },
    start: function () {
        // 開始游戲
        myLucky.play()
        // 使用定時(shí)器模擬接口
        setTimeout(() => {
            // 結(jié)束游戲, 并抽第0號(hào)獎(jiǎng)品
            myLucky.stop(0)
        }, 3000)
    },
    end: function (event) {
        // 獲取抽獎(jiǎng)的值
        console.log(event)
    }
})

抽獎(jiǎng)二

// 第二個(gè)抽獎(jiǎng)
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: '抽獎(jiǎng)', top: '40%' }],
        },
    ],
    defaultStyle: {
        background: '#b8c5f2'
    },
    start: function () {
        // 開始游戲
        myLucky2.play()
        // 使用定時(shí)器模擬接口
        setTimeout(() => {
            // 結(jié)束游戲, 并抽第0號(hào)獎(jiǎng)品
            myLucky2.stop(0)
        }, 3000)
    },
    end: function (event) {
        // 獲取抽獎(jiǎng)的值
        console.log(event)
    }
})

抽獎(jiǎng)三

// 第三個(gè)抽獎(jiǎng)
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: '小米手環(huán)', top: '60%' }], imgs: [prizeImg3[1]] },
        { x: 2, y: 0, fonts: [{ text: '蘋果13', top: '60%' }], imgs: [prizeImg3[2]] },
        { x: 2, y: 1, fonts: [{ text: '優(yōu)惠券50', top: '60%' }], imgs: [prizeImg3[3]] },
        { x: 2, y: 2, fonts: [{ text: '優(yōu)惠券100', top: '60%' }], imgs: [prizeImg3[4]] },
        { x: 1, y: 2, fonts: [{ text: '迷你小冰箱', top: '60%' }], imgs: [prizeImg3[5]] },
        { x: 0, y: 2, fonts: [{ text: '騰訊會(huì)員', top: '60%' }], imgs: [prizeImg3[6]] },
        { x: 0, y: 1, fonts: [{ text: '優(yōu)酷會(huì)員', top: '60%' }], imgs: [prizeImg3[7]] },
    ],
    buttons: [
        {
            x: 1, y: 1,
            background: '#9c9dd8',
            fonts: [{ text: '抽獎(jiǎng)', top: '40%' }],
        },
    ],
    defaultStyle: {
        background: '#b8c5f2',
        fontSize: '14'
    },
    start: function () {
        // 開始游戲
        myLucky3.play()
        // 使用定時(shí)器模擬接口
        setTimeout(() => {
            // 結(jié)束游戲, 并抽第0號(hào)獎(jiǎng)品
            myLucky3.stop(0)
        }, 3000)
    },
    end: function (event) {
        // 獲取抽獎(jiǎng)的值
        console.log(event)
    }
})

到此這篇關(guān)于基于JS+Canvas的lucky-canvas 抽獎(jiǎng)功能的文章就介紹到這了,更多相關(guān)lucky canvas 抽獎(jiǎng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: