基于JS+Canvas的lucky-canvas?抽獎(jiǎng)功能
更新時(shí)間：2022年06月14日 10:09:50 作者：vaelcy
一個(gè)基于?Js?+?Canvas?的大轉(zhuǎn)盤(pán)和九宮格和老虎機(jī)抽獎(jiǎng)，使用lucky-canvas?功能可以自由配置，多端適配的特點(diǎn)，本文通過(guò)實(shí)例代碼給大家詳細(xì)介紹抽獎(jiǎng)方法，感興趣的朋友一起看看吧
ucky-canvas 介紹
一個(gè)基于 Js + Canvas 的【大轉(zhuǎn)盤(pán) & 九宮格 & 老虎機(jī)】抽獎(jiǎng)， 致力于為 web 前端提供一個(gè)功能強(qiáng)大且專業(yè)可靠的組件， 只需要通過(guò)簡(jiǎn)單配置即可實(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 屬性來(lái)適配移動(dòng)端布局
具體詳細(xì)功能介紹api請(qǐng)看官網(wǎng)
下面我簡(jiǎn)單寫(xiě)了三個(gè)抽獎(jiǎng)小demo，大家可做參考。
代碼塊展示
這里使用掘金的碼上掘金展示效果給大家看，ps:里邊的圖片因?yàn)橐玫氖潜镜厮圆伙@示，可以看下面效果圖的展示
https://code.juejin.cn/pen/7103522105597100039
效果圖展示
圖片是隨便用的本地圖片（懶得在網(wǎng)上找圖片資源了），大家可自行替換成自己想要的圖片哈，我這里就是簡(jiǎn)單實(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: '蘋(píng)果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 () {
// 開(kāi)始游戲
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 () {
// 開(kāi)始游戲
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: '蘋(píng)果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 () {
// 開(kāi)始游戲
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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript中實(shí)現(xiàn)Map的示例代碼
本篇文章給大家介紹javascript中實(shí)現(xiàn)map的示例代碼，代碼寫(xiě)的簡(jiǎn)單易懂，可以獲取、刪除鍵值，剛興趣的朋友跟著腳本之家小編一起學(xué)習(xí)吧。2015-09-09
JavaScript reduce和reduceRight詳解
這篇文章主要介紹了JavaScript reduce和reduceRight的高級(jí)用法詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了7種JS腳本分頁(yè)樣式，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
JavaScript實(shí)現(xiàn)多文件拖動(dòng)上傳功能
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)多文件拖動(dòng)上傳功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
了解Javascript中函數(shù)作為對(duì)象的魅力
這篇文章主要介紹了了解Javascript中函數(shù)作為對(duì)象的魅力,javascript中函數(shù)可以有屬性，可以有方法， 可以享有所有對(duì)象所擁有的特性。并且最重要的，她還可以直接被調(diào)用,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了JS根據(jù)生日算年齡的方法,涉及javascript操作時(shí)間的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了詳解JSON和JSONP劫持以及解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
javascript基本數(shù)據(jù)類型和轉(zhuǎn)換
本文主要介紹了javascript的基本數(shù)據(jù)類型和轉(zhuǎn)換，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
無(wú)縫滾動(dòng)的簡(jiǎn)單實(shí)現(xiàn)代碼(推薦)
下面小編就為大家?guī)?lái)一篇無(wú)縫滾動(dòng)的簡(jiǎn)單實(shí)現(xiàn)代碼(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
HTTP?HEAD請(qǐng)求的使用場(chǎng)合實(shí)例詳解
這篇文章主要為大家介紹了HTTP?HEAD請(qǐng)求的使用場(chǎng)合實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12