微信小程序——转盘抽奖

如题，该小程序为一款利用canvas实现的转盘抽奖效果，今天我就来总结一下转盘旋转具体实现原理，首先还是上图上代码(一下代码为转盘部分代码，想要查看完整代码，请移步支我的github，飞机票，点击跳转)

wxml代码（中间转盘部分代码）

<view class="canvas-container" style='margin:0 auto;'><view animation="{{animationData}}" class="canvas-content" style='margin:0 auto;'><canvas style="width: 300px; height: 300px; margin:0 auto;" class="canvas-element" canvas-id="lotteryCanvas"></canvas><view class="canvas-line"><view class="canvas-litem" wx:for="{{awardsList}}" wx:key="unique" style="-webkit-transform: rotate({{item.lineTurn}});transform: rotate({{item.lineTurn}})"></view></view><view class="canvas-list"><view class="canvas-item" wx:for="{{awardsList}}" wx:key="unique"><view class="canvas-item-text" style="-webkit-transform: rotate({{item.turn}});transform: rotate({{item.turn}})"><text class='canvas-item-text-inner {{scale===1.4?"btnfont":"normal"}}'> {{item.award}}</text></view></view></view>  </view><view class="{{scale===1.4?'btnfont':'normal'}} canvas-btn {{turning?disabled:able}} {{chanceRemain==0?disabled:able}}"></view> </view>

js代码（转盘部分代码）：

/*** 抽奖处理函数：*/getLottery: function () {var that = this;if (that.data.count < 5) {   //判断用户钻石数量是否大于等于5that.setData({isShare: true})return } //减少钻石数量：this.setData({count:that.data.count-5,turning:true});setTimeout(function(){that.setData({turning:false})},4500)var cot = that.data.count// var awardIndex = Math.random() * 6 >>> 0;// 获取奖品配置var awardsConfig = app.awardsConfig,runNum = 4,awardIndex=0;// if (awardIndex < 2) awardsConfig.chance = false// console.log(awardIndex)//设置概率：随机从数组中抽取一个数，数组中越大的数出现的次数越少，以此实现概率差异var Parr = [150, 140, 100, 100, 60, 60, 60, 30, 30, 10, 10, 10, 10, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2];var PrandomNum = Math.random() * 78 >>> 0;switch (Parr[PrandomNum]){case 2:awardIndex = 1breakcase 5:awardIndex = 0breakcase 10:awardIndex = 2breakcase 30:awardIndex = 3breakcase 60:awardIndex = 4breakcase 100:awardIndex = 5breakcase 150:awardIndex = 6break}console.log("奖品序号："+awardIndex);// 旋转抽奖app.runDegs = app.runDegs || 0console.log('deg', app.runDegs)app.runDegs = app.runDegs + (360 - app.runDegs % 360) + (360 * runNum - awardIndex * (360 / 7))console.log('deg', app.runDegs)var animationRun = wx.createAnimation({duration: 4000,timingFunction: 'ease'})that.animationRun = animationRunanimationRun.rotate(app.runDegs).step()that.setData({animationData: animationRun.export()})// 记录奖品var winAwards = wx.getStorageSync('winAwards') || {data:[]}winAwards.data.push(awardsConfig.awards[awardIndex].name + '1个')wx.setStorageSync('winAwards', winAwards)// 中奖提示setTimeout(function() {if(awardIndex == 0){that.setData({isHongbao: true})hongbao = Math.random().toFixed(4)} else if(awardIndex == 1){that.togglePopup3()} else if(awardIndex == 2){wx.showModal({title: '恭喜',content: '您获得10钻石',showCancel: false})let timer = setInterval(function(){  that.setData({count: that.data.count + 1})let a = parseInt(that.data.count - cot)if(a==10){clearInterval(timer)}},50)} else if(awardIndex == 3){that.setData({isShare: true})return} else if(awardIndex == 4){wx.showModal({title: '恭喜',content: '您获得宝箱',showCancel: false})}else if(awardIndex == 5){wx.showModal({title: '恭喜',content: '您获得1元红包已存入账户',showCancel: false})let m = parseFloat(parseFloat(that.data.money) + 1).toFixed(4)that.setData({money: m})} else{wx.showModal({title: '恭喜',content: '您获得5元红包已存入账户',showCancel: false})let m = parseFloat(parseFloat(that.data.money) + 5).toFixed(4)that.setData({money: m})}}, 4000);},
onReady: function (e) {var that = this;wx.getSystemInfo({success: function(res) {that.setData({contentHeight:res.windowHeight});if(res.windowWidth<360){that.setData({scale:0.9})}else if(res.windowWidth>500){that.setData({scale: 1.4})}},})// getAwardsConfigapp.awardsConfig = {count: 50,awards:[{ 'index': 0, 'name': '随机红包'},{ 'index': 1, 'name': '幸运奖'},{ 'index': 2, 'name': '10钻'},{ 'index': 3, 'name': '大量钻石'},{ 'index': 4, 'name': '宝箱'},{ 'index': 5, 'name': '1元红包' },{ 'index': 6, 'name': '5元红包'}]}// wx.setStorageSync('awardsConfig', JSON.stringify(awardsConfig))that.setData({count: app.awardsConfig.count})// 绘制转盘var awardsConfig = app.awardsConfig.awards,len = awardsConfig.length,rotateDeg = 360 / len / 2 + 90,html = [],turnNum = 1 / len;  // 文字旋转 turn 值var ctx = wx.createContext();for (var i = 0; i < len; i++) {// 保存当前状态ctx.save();// 开始一条新路径ctx.beginPath();// 位移到圆心，下面需要围绕圆心旋转ctx.translate(150, 150);// 从(0, 0)坐标开始定义一条新的子路径ctx.moveTo(0, 0);// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。ctx.rotate((360 / len * i - rotateDeg) * Math.PI/180);// 绘制圆弧ctx.arc(0, 0, 150, 0,  2 * Math.PI / len, false);// 颜色间隔if (i % 2 == 0) {ctx.setFillStyle('rgba(255,184,32,.1)');}else{ctx.setFillStyle('rgba(255,203,63,.1)');}// 填充扇形ctx.fill();// 绘制边框ctx.setLineWidth(0.5);ctx.setStrokeStyle('rgba(228,55,14,.1)');ctx.stroke();// 恢复前一个状态ctx.restore();// 奖项列表html.push({ turn: i * turnNum + 'turn', lineTurn: i * turnNum + turnNum / 2 + 'turn', award: awardsConfig[i].name, img: awardsConfig[i].img });      };that.setData({awardsList: html});app.globalData.moneyData = {count: that.data.count,money: that.data.money}},

wxss代码：

/* 转盘 */.canvas-container ul, .canvas-container li {margin: 0;padding: 0;list-style: none;
}.canvas-container {padding: 2px;margin: 0 auto;position: relative;left: 10rpx;top: 0;width: 330px;height: 310px;border-radius: 50%;/*border: 2px solid #E44025;*/}.canvas-content {box-sizing: content-box;border: 2px solid rgb(255, 224, 151);position: absolute;left: 5px;top: 5px;z-index: 1;display: block;width: 300px;height: 300px;border-radius: inherit;background-clip: padding-box;background-color: rgb(255, 224, 151);
}.canvas-element {position: relative;z-index: 1;width: inherit;height: inherit;border-radius: 50%;
}.canvas-list {position: absolute;left: 0;top: 0;width: inherit;height: inherit;z-index: 9999;
}.canvas-item {position: absolute;left: 0;top: 0;width: 100%;height: 100%;color:rgb(228, 64, 37);font-weight: bold;
}.canvas-item-text {position: relative;display: block;margin: 0 auto;padding-top: 10rpx;text-align: center;-webkit-transform-origin: 50% 150px;transform-origin: 50% 150px;
}

微信小程序——转盘抽奖相关推荐

微信小程序-转盘抽奖
微信小程序-转盘抽奖代码: lucky-draw.wxss: .lucky_draw_zp{ width: 502rpx; height: 502rpx; margin: 0 auto; positi ...
IVX低代码平台开发——微信小程序实现抽奖功能
写在前面通过利用可视化编程实现微信小程序的抽奖功能,带大家初步了解 iVX 的强大之处. 文章目录写在前面 iVX开发抽奖功能实现 iVX开发基本介绍 iVX是一个 "零代码&quo ...
微信小程序圆盘抽奖（扇形画圆）
微信小程序圆盘抽奖(扇形画圆) 前言提示:这里可以添加本文要记录的大概内容: 例如:领导安排做一个微信小程序的转盘抽奖,要求可以复用,动态的修改抽奖的板块个数,由于是第一次做微信小程序踩了很多的坑, ...
微信小程序的抽奖页面
微信小程序的抽奖页面做一个1-10的微信小程序抽奖界面,随机到6和8会显示中奖信息! 点开始按钮开始执行,点结束按钮结束抽奖并且判断是否中奖 wxml代码: <view>{{title} ...
【小程序与公众号】微信小程序九宫格抽奖（抽奖完全随机）
上图话不多说直接上图,抽奖是顺时针又快变慢(还原抽奖的动画)进行抽奖,抽奖的几率都是随机源码接下来展示的就是微信小程序中的九宫格抽奖说明适用范围抽奖逻辑只是原生JS,通过数据进行驱动,因此 ...
微信小程序——翻牌抽奖功能
目录前言一.效果展示二.主要代码 1.wxml主要代码: 2.wxss主要代码 3.js主要代码 4.app.js主要代码三.实现思路及注意点 1.洗牌功能实现方法 2.翻牌功能实现方式 3. ...
京麦微信小程序圣诞抽奖项目的架构设计
来源: linkedkeeper.com 作者:肖依云,热爱技术,熟悉Struts2.Spring.Spring MVC等常用开源框架,对开发分布式.高并发系统有一定的学习和研究.正在学习大数据和AI ...
京麦微信小程序圣诞抽奖项目总结
肖依云,2017年加入京东,目前就职于京东商城京麦平台组,从事京东商家开放平台的相关开发工作. 该项目的主要功能特点是类似于一个秒杀系统,存在短时间高并发问题,在拿到项目需求后,我们对该项目进行了两版 ...
uniapp 微信小程序转盘指针抽奖
转盘抽奖uniapp小程序,跟搜到的插件转盘旋转不同,我们的需求是中间的指针也就是瓶子旋转,而且要求长摁蓄力液体装满瓶子,松手旋转并且液体慢慢转为空,最后停止在相应的奖品上. 首先考虑蓄力液体装满的问 ...

微信小程序——转盘抽奖

微信小程序——转盘抽奖相关推荐

最新文章

热门文章