lucky canvas - 免费开源的大转盘/九宫格抽奖前端开发组件

lucky canvas - 免费开源的大转盘/九宫格抽奖前端开发组件

618马上要到了,大家有遇到做抽奖活动的需求吗?看看这个强大的抽奖组件吧,上线还来得及。

关于 lucky-canvas

lucky-canvas 是一个基于 Js + Canvas 的抽奖 web 前端组件,提供大转盘和九宫格两种抽奖界面,UI 精美,功能强大且专业可靠,只需要通过简单配置即可实现自由定制,快速完成产品需求。

lucky-canvas 官网截图

lucky-canvas 的功能特色

  • 简单自由。奖品 / 文字 / 图片 / 颜色 / 按钮均可自由配置;支持同步 / 异步抽奖;中奖概率前 / 后端可控
  • 多端适配。支持 Js / JQ / Vue / React / 微信小程序 / UniApp / Taro 等;并且多端表现完全一致
  • 响应式。自动根据设备 dpr 调整清晰度;并支持使用 百分比 / rem / rpx 属性来适配移动端布局

开发上手体验

这又是一个非常优质的 web 前端组件,官网的代码例子所用的 UI 都非常精致,以至于赶时间上线的时候,直接拿官网的素材改改,效果就已经很棒了。官网一共有9个仿照大厂抽奖的示例,不仅可以在线体验,而且每一个都提供了代码示例,复制粘贴就可以使用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P5uqjdgJ-1627011352123)(https://img.thosefree.com/wp-content/uploads/2021/06/lucky-canvas-example.jpg)]

lucky-canvas 的专业和可靠在于无论你使用哪种主流技术路线(除了Angular),都提供了相应的版本和详细的文档,连京东出品的 Taro 这样相对小众的开发工具都支持了。

看名字也能看出,lucky-canvas 是基于 canvas 来构建视图的,所以完全不用像以前用 div 写抽奖界面一样,适配麻烦、布局麻烦、操作怕烦,性能也是一个不得不考虑的问题。而这些 lucky-canvas 都很好地解决了,更让开发体验到极致的是,官网还提供了可视化的编辑器,通过选择几个表单就能导出代码,谁用谁爽,不说了,我忍不住去点个 star 了。

可视化编辑器

免费开源说明

lucky-canvas 是一个完全免费和开源的前端组件,基于 Apache 2.0 开源协议托管在 Github 上,任何个人和公司都可以免费下载使用,包括用在商业项目上。

原文链接:https://www.thosefree.com/lucky-canvas

  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 首先,需要在HTML中创建一个包含大转盘的容器元素,并在其中添加一个canvas元素。 ```html <div id="lucky-wheel"> <canvas id="wheel-canvas"></canvas> </div> ``` 2. 在CSS中设置容器元素的样式,如宽度、高度、背景颜色等。 ```css #lucky-wheel { width: 500px; height: 500px; background-color: #fff; border-radius: 50%; position: relative; margin: 0 auto; } ``` 3. 在JavaScript中编写抽奖逻辑代码。首先需要定义奖品数组,每个奖品包含名称、图片、颜色和概率等信息。 ```javascript const prizes = [ { name: '奖品1', image: 'image1.png', color: '#FFA07A', probability: 0.1 }, { name: '奖品2', image: 'image2.png', color: '#87CEFA', probability: 0.2 }, { name: '奖品3', image: 'image3.png', color: '#FFD700', probability: 0.3 }, { name: '奖品4', image: 'image4.png', color: '#00FA9A', probability: 0.4 } ]; ``` 4. 接着,需要定义转盘的样式和绘制函数。转盘的样式可以使用CSS中的渐变和阴影等效果来实现。 ```javascript const wheelStyle = { lineWidth: 2, strokeStyle: '#000', fillStyle: '#fff', shadowColor: '#666', shadowBlur: 4, gradient: { startColor: '#fff', endColor: '#ccc', startX: 0, startY: 0, endX: 0, endY: wheelRadius } }; function drawWheel() { ctx.save(); ctx.translate(wheelCenterX, wheelCenterY); ctx.rotate((Math.PI / 180) * wheelAngle); ctx.beginPath(); ctx.arc(0, 0, wheelRadius, 0, Math.PI * 2); ctx.lineWidth = wheelStyle.lineWidth; ctx.strokeStyle = wheelStyle.strokeStyle; ctx.fillStyle = wheelStyle.fillStyle; ctx.shadowColor = wheelStyle.shadowColor; ctx.shadowBlur = wheelStyle.shadowBlur; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.stroke(); ctx.fill(); ctx.restore(); drawWheelText(); } ``` 5. 然后,需要定义每个奖品的位置和角度,以及根据概率计算每个奖品在转盘上的占比。 ```javascript const prizeCount = prizes.length; const prizeAngle = 360 / prizeCount; let prizePositions = []; let prizeProbabilities = []; for (let i = 0; i < prizeCount; i++) { const angle = i * prizeAngle; const position = { x: wheelCenterX + Math.sin(degToRad(angle)) * (wheelRadius - wheelTextMargin), y: wheelCenterY - Math.cos(degToRad(angle)) * (wheelRadius - wheelTextMargin) }; prizePositions.push(position); prizeProbabilities.push(prizes[i].probability); } const totalProbability = prizeProbabilities.reduce((a, b) => a + b, 0); const prizeRatios = prizeProbabilities.map(p => p / totalProbability); ``` 6. 接下来,需要编写抽奖函数。该函数首先根据每个奖品的概率计算出随机的中奖结果,然后根据中奖结果的位置和角度旋转转盘,并触发抽奖结束的回调函数。 ```javascript function startLottery() { const random = Math.random(); let sum = 0; for (let i = 0; i < prizeCount; i++) { sum += prizeRatios[i]; if (random <= sum) { const prizeIndex = i; const prizeAngle = 360 - (prizeIndex * prizeAngle) - (prizeAngle / 2); const targetAngle = prizeAngle + 360 * 5; const animate = () => { if (wheelAngle < targetAngle) { wheelAngle += 5; drawWheel(); requestAnimationFrame(animate); } else { onLotteryEnd(prizes[prizeIndex]); } }; requestAnimationFrame(animate); break; } } } ``` 7. 最后,在初始化函数中调用绘制转盘和绑定抽奖按钮的事件处理函数,即可完成大转盘抽奖的实现。 ```javascript function init() { const canvas = document.getElementById('wheel-canvas'); canvas.width = wheelWidth; canvas.height = wheelHeight; ctx = canvas.getContext('2d'); drawWheel(); const button = document.getElementById('lottery-button'); button.addEventListener('click', startLottery); } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值