E企盈营销工具技术服务商 热线:4006-838-530

微信抽奖小程序,微信小程序转盘抽奖

E企盈直播平台营销卖货系统

如题,该小程序为一款利用canvas实现的转盘抽奖效果,今天我就来总结一下转盘旋转具体实现原理,首先还是上图上代码(一下代码为转盘部分代码,想要查看完整代码,请移步支我的github,)wxml代码(中间转盘部分代码)viewstyle=’margin:0auto;’viewanimation=”{{animationData}}”style=’margin:0auto;’canvasstyle=”width:300px;height:300px;margin:0auto;”canvas-id=”lotteryCanvas”/canvasviewviewwx:for=”{{awardsList}}”wx:key=”unique”style=”-webkit-transform:rotate({{item.lineTurn}});transform:rotate({{item.lineTurn}})”/view/viewviewviewwx:for=”{{awardsList}}”wx:key=”unique”viewstyle=”-webkit-transform:rotate({{item.turn}});transform:rotate({{item.turn}})”textclass=’canvas-item-text-inner{{scale===1.4?”btnfont”:”normal”}}'{{item.award}}/text/view/view/view/viewview/view/viewjs代码(转盘部分代码):/抽奖处理函数:/getLottery:function(){varthat=this;if(that.data.count5){//判断用户钻石数量是否大于等于5that.setData({isShare:true})return}//减少钻石数量:this.setData({count:that.data.count-5,turning:true});setTimeout(function(){that.setData({turning:false})},4500)varcot=that.data.count//varawardIndex=Math.random()60;//获取奖品配置varawardsConfig=app.awardsConfig,runNum=4,awardIndex=0;//if(awardIndex2)awardsConfig.chance=false//console.log(awardIndex)//设置概率:随机从数组中抽取一个数,数组中越大的数出现的次数越少,以此实现概率差异varParr=[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];varPrandomNum=Math.random()780;switch(Parr[PrandomNum]){case2:awardIndex=1breakcase5:awardIndex=0breakcase10:awardIndex=2breakcase30:awardIndex=3breakcase60:awardIndex=4breakcase100:awardIndex=5breakcase150:awardIndex=6break}console.log(“奖品序号:”+awardIndex);//旋转抽奖app.runDegs=app.runDegs||0console.log(‘deg’,app.runDegs)app.runDegs=app.runDegs+(360-app.runDegs%360)+(360runNum-awardIndex(360/7))console.log(‘deg’,app.runDegs)varanimationRun=wx.createAnimation({duration:4000,timingFunction:’ease’})that.animationRun=animationRunanimationRun.rotate(app.runDegs).step()that.setData({animationData:animationRun.export()})//记录奖品varwinAwards=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)}elseif(awardIndex==1){that.togglePopup3()}elseif(awardIndex==2){wx.showModal({title:’恭喜’,content:’您获得10钻石’,showCancel:false})lettimer=setInterval(function(){that.setData({count:that.data.count+1})leta=parseInt(that.data.count-cot)if(a==10){clearInterval(timer)}},50)}elseif(awardIndex==3){that.setData({isShare:true})return}elseif(awardIndex==4){wx.showModal({title:’恭喜’,content:’您获得宝箱’,showCancel:false})}elseif(awardIndex==5){wx.showModal({title:’恭喜’,content:’您获得1元红包已存入账户’,showCancel:false})letm=parseFloat(parseFloat(that.data.money)+1).toFixed(4)that.setData({money:m})}else{wx.showModal({title:’恭喜’,content:’您获得5元红包已存入账户’,showCancel:false})letm=parseFloat(parseFloat(that.data.money)+5).toFixed(4)that.setData({money:m})}},4000);},onReady:function(e){varthat=this;wx.getSystemInfo({success:function(res){that.setData({contentHeight:res.windowHeight});if(res.windowWidth360){that.setData({scale:0.9})}elseif(res.windowWidth500){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})//绘制转盘varawardsConfig=app.awardsConfig.awards,len=awardsConfig.length,rotateDeg=360/len/2+90,html=[],turnNum=1/len;//文字旋转turn值varctx=wx.createContext();for(vari=0;ilen;i++){//保存当前状态ctx.save();//开始一条新路径ctx.beginPath();//位移到圆心,下面需要围绕圆心旋转ctx.translate(150,150);//从(0,0)坐标开始定义一条新的子路径ctx.moveTo(0,0);//旋转弧度,需将角度转换为弧度,使用degreesMath.PI/180公式进行计算。ctx.rotate((360/leni-rotateDeg)Math.PI/180);//绘制圆弧ctx.arc(0,0,150,0,2Math.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:iturnNum+’turn’,lineTurn:iturnNum+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-containerul,.canvas-containerli{margin:0;padding:0;list-style:none;}.canvas-container{padding:2px;margin:0auto;position:relative;left:10rpx;top:0;width:330px;height:310px;border-radius:50%;/border:2pxsolid#E44025;/}.canvas-content{box-sizing:content-box;border:2pxsolidrgb(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:0auto;padding-top:10rpx;text-align:center;-webkit-transform-origin:50%150px;transform-origin:50%150px;}

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信抽奖小程序,微信小程序转盘抽奖
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏