基于JS+Canvas的lucky-canvas?抽獎功能
ucky-canvas 介紹
一個基于 Js + Canvas 的【大轉(zhuǎn)盤 & 九宮格 & 老虎機(jī)】抽獎, 致力于為 web 前端提供一個功能強(qiáng)大且專業(yè)可靠的組件, 只需要通過簡單配置即可實(shí)現(xiàn)自由化定制, 幫助你快速的完成產(chǎn)品需求。
lucky-canvas 功能特點(diǎn)
自由配置
獎品 / 文字 / 圖片 / 顏色 / 按鈕均可自由配置;支持同步 / 異步抽獎;中獎概率前 / 后端可控
多端適配
支持 JS / TS / JQ / Vue / React / 微信小程序 / UniApp / Taro 等;并且多端使用 / 表現(xiàn)形式完全一致
響應(yīng)式
自動根據(jù)設(shè)備 dpr 調(diào)整清晰度;并支持使用 百分比 / rem / rpx 屬性來適配移動端布局
下面我簡單寫了三個抽獎小demo,大家可做參考。
代碼塊展示
這里使用掘金的碼上掘金展示效果給大家看,ps:里邊的圖片因?yàn)橐玫氖潜镜厮圆伙@示,可以看下面效果圖的展示
https://code.juejin.cn/pen/7103522105597100039
效果圖展示
圖片是隨便用的本地圖片(懶得在網(wǎng)上找圖片資源了),大家可自行替換成自己想要的圖片哈,我這里就是簡單實(shí)現(xiàn)一下demo。
代碼如下
抽獎一
// 第一個抽獎 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: '騰訊會員', top: '40%' }], }, { x: 0, y: 1, fonts: [{ text: '優(yōu)酷會員', top: '40%' }], }, ], buttons: [ { x: 1, y: 1, background: '#9c9dd8', fonts: [{ text: '抽獎', top: '40%' }], }, ], defaultStyle: { background: '#b8c5f2', fontSize: '14' }, start: function () { // 開始游戲 myLucky.play() // 使用定時器模擬接口 setTimeout(() => { // 結(jié)束游戲, 并抽第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(() => { // 結(jié)束游戲, 并抽第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: '小米手環(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: '騰訊會員', top: '60%' }], imgs: [prizeImg3[6]] }, { x: 0, y: 1, fonts: [{ text: '優(yōu)酷會員', 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(() => { // 結(jié)束游戲, 并抽第0號獎品 myLucky3.stop(0) }, 3000) }, end: function (event) { // 獲取抽獎的值 console.log(event) } })
到此這篇關(guān)于基于JS+Canvas的lucky-canvas 抽獎功能的文章就介紹到這了,更多相關(guān)lucky canvas 抽獎內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js 按照指定間隔 向字符串中插入隨機(jī)字符串的實(shí)現(xiàn)代碼
看到論壇有人問,覺得有意思,就試著寫了一下。2010-03-03javascript add event remove event
javascript事件綁定和刪除功能代碼2008-04-04window.print()局部打印三種方式(小結(jié))
本文主要介紹了window.print()局部打印三種方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06