大家好,我是前端实验室的老鱼！一名资深的互联网玩家，专注分享大前端领域技术、面试宝典、学习资料等~
前言
在前端开发中，随机抽奖活动的需求大家一定都遇到过吧~
那你还在使用Div写抽奖页面布局吗？还在为适配、性能而烦恼吗？
不管是不是...都不要错过这款抽奖组件哦~
效果展示
圣诞节快来了,我也想有个人让我这样选礼物！！！
说多了都是泪，我们还是看看怎么实现吧~
关于 lucky-canvas
一个基于 Js + Canvas 的【大转盘 & 九宫格 & 老虎机】抽奖， 致力于为 web 前端提供一个功能强大且专业可靠的组件， 只需要通过简单配置即可实现自由化定制， 帮助你快速的完成产品需求。
lucky-canvas 功能特点
自由配置
奖品 / 文字 / 图片 / 颜色 / 按钮均可自由配置；支持同步 / 异步抽奖；中奖概率前 / 后端可控
多端适配
支持 JS / TS / JQ / Vue / React / 微信小程序 / UniApp / Taro 等；并且多端使用 / 表现形式完全一致
响应式
自动根据设备 dpr 调整清晰度；并支持使用 百分比 / rem / rpx 属性来适配移动端布局
快速上手体验
1.在 Js / JQ 中使用
方式 1：通过 script 标签引入
<div id="my-lucky"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
const myLucky = new LuckyCanvas.LuckyWheel('#my-lucky', {
width: '200px',
height: '200px',
blocks: [{ padding: '10px', background: '#869cfa' }],
prizes: [
{ fonts: [{ text: '谢谢惠顾' }], background: '#e9e8fe' },
{ fonts: [{ text: 'IPhone 13 Pro' }], background: '#b8c5f2' },
{ fonts: [{ text: '520红包' }], background: '#e9e8fe' },
{ fonts: [{ text: '么么哒一个' }], background: '#b8c5f2' },
{ fonts: [{ text: '口红一支' }], background: '#e9e8fe' },
{ fonts: [{ text: '香水一瓶' }], background: '#b8c5f2' },
{ fonts: [{ text: '清空购物车' }], background: '#b8c5f2' },
{ fonts: [{ text: '洗袜子一个月' }], background: '#b8c5f2' },
],
})
</script>
复制代码方式 2：通过 import 引入
# npm 安装
npm install lucky-canvas@latest
# 或者 yarn 安装
yarn add lucky-canvas@latest
复制代码import { LuckyWheel, LuckyGrid } from 'lucky-canvas'
const myLucky = new LuckyWheel('#my-lucky', {
width: '200px',
height: '200px',
blocks: [{ padding: '10px', background: '#869cfa' }],
prizes: [
{ fonts: [{ text: '谢谢惠顾' }], background: '#e9e8fe' },
{ fonts: [{ text: 'IPhone 13 Pro' }], background: '#b8c5f2' },
{ fonts: [{ text: '520红包' }], background: '#e9e8fe' },
{ fonts: [{ text: '么么哒一个' }], background: '#b8c5f2' },
{ fonts: [{ text: '口红一支' }], background: '#e9e8fe' },
{ fonts: [{ text: '香水一瓶' }], background: '#b8c5f2' },
{ fonts: [{ text: '清空购物车' }], background: '#b8c5f2' },
{ fonts: [{ text: '洗袜子一个月' }], background: '#b8c5f2' },
],
})
复制代码lucky.js
const myLucky = new LuckyCanvas.LuckyGrid('#my-lucky', {
width: '500px',
height: '500px',
//设置背景 - block
blocks: [{
padding: '10px',//内边距
background: '#869cfa',//背景颜色
borderRadius: '10px'//圆角半径
},
{
padding: '10px',
background: '#e9e8fe',
borderRadius: '10px'
},
],
//设置奖品 - prizes
prizes: [{
x: 0,//相对坐标 x
y: 0,//相对坐标 y
//奖品图片
imgs: [{
src: './img/aaa.png',//图片路径
width: '50%',//图片宽度
top: '20%'//图片位置
}],
//奖品文章
fonts: [{
text: '谢谢惠顾',//文字内容
top: '75%'//文字位置
}]
},
{
x: 1,
y: 0,
imgs: [{
src: './img/bbb.png',
width: '50%',
top: '20%'
}],
fonts: [{
text: 'IPhone 13 Pro',
top: '75%'
}]
},
{
x: 2,
y: 0,
imgs: [{
src: './img/ccc.png',
width: '50%',
top: '20%'
}],
fonts: [{
text: '520红包',
top: '75%'
}]
},
{
x: 2,
y: 1,
imgs: [{
src: './img/aaa.png',
width: '50%',
top: '20%'
}],
fonts: [{
text: '么么哒一个',
top: '75%'
}]
},
{
x: 2,
y: 2,
imgs: [{
src: './img/ccc.png',
width: '50%',
top: '20%'
}],
fonts: [{
text: '口红一支',
top: '75%'
}]
},
{
x: 1,
y: 2,
imgs: [{
src: './img/bbb.png',
width: '50%',
top: '20%'
}],
fonts: [{
text: '香水一瓶',
top: '75%'
}]
},
{
x: 0,
y: 2,
imgs: [{
src: './img/ccc.png',
width: '50%',
top: '20%'
}],
fonts: [{
text: '清空购物车',
top: '75%'
}]
},
{
x: 0,
y: 1,
imgs: [{
src: './img/bbb.png',
width: '50%',
top: '20'
}],
fonts: [{
text: '洗袜子一个月',
top: '75%'
}]
},
],
//抽奖按钮
buttons: [{
x: 1,//相对坐标 x
y: 1,//相对坐标
row: 1,//纵向合并格子
col: 1,//横向合并格子
background: 'rgba(0,0,0,0)',//格子背景颜色
imgs: [{//奖品按钮 可以用图片
src: './img/go.gif',
width: '100%',
height: '100%',
}],
}, ],
//默认样式
defaultStyle: {
background: '#b8c5f2'//格子背景颜色
},
//默认配置
defaultConfig: {
speed: 10//旋转速度峰值
},
//开始抽奖前
start: function() {
myLucky.play()//开始抽奖
// 假设接口的请求速度是1s
setTimeout(_ => {
//缓慢通知
myLucky.stop(Math.floor((Math.random()*6)))
}, 1000)
},
//抽奖结束后
end: function(prize) {
alert('恭喜中奖: ' + prize.fonts[0].text)
}
})
复制代码好了，一个简单的抽奖大转盘就实现啦~
还有更多强大的属性配置，有需要了解的可以前往官网查阅学习
文档地址：100px.net/docs/grid.h…
Github地址：github.com/LuckDraw/lu…