大转盘抽奖小程序版转盘抽奖网页版

这篇文章主要为大家详细介绍了大转盘抽奖小程序版和网页版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

今天整理了下以前写的小demo，把大转盘抽奖的代码，整合下，列了网页版和小程序两个版本，这个转盘抽奖的核心是H5的canvas和Css3的translate属性，非常简单，写了网页版和小程序版供大家参考，主要核心代码就是利用canvas画图，完整代码见大转盘抽奖，下载可用

希望给大家带来帮助

 //转盘内部绘制 lottery.prototype.getCanvasI=function(){ let itemsArc=360/this.itemsNum //获取大转盘每等分的角度 this.itemsArc=itemsArc let widthI=canvasI.width let heightI=canvasI.height this.w1=parseInt(widthI/2) this.h1=parseInt(heightI/2) this.Items(itemsArc)//每一份扇形的内部绘制 this.mytime=setInterval(this.light.bind(this),1000) } //绘制奖品名称 lottery.prototype.Items=function(e){ let that=this let itemsArc=e//每一分扇形的角度 let Num=that.itemsNum// 等分数量 let text=that.text// 放文字的数组 for(let i=0;i=2){ that.lamp=0 } ctx2.beginPath() ctx2.arc(that.w2,that.h2,that.w2,0,2*Math.PI)//绘制底色为红色的圆形 ctx2.fillStyle="#FA7471"; ctx2.fill() for(let i=0;i

小程序的代码示例

 //事件处理函数 onLoad: function (e) { let that=this let itemsArc=360/that.data.itemsNum //获取大转盘每等分的角度 that.setData({ itemsArc },function () { wx.createSelectorQuery().select('#canvas-one').boundingClientRect(function (rect) { w1=parseInt(rect.width/2) h1=parseInt(rect.height/2) that.Items(itemsArc)//每一份扇形的内部绘制 }).exec() mytime=setInterval(that.light,1000)//启动跑马灯定时器 }) }, onReady:function () { var that=this wx.createSelectorQuery().select('#canvas-bg').boundingClientRect(function (rect) {//监听canvas的宽高 w2=parseInt(rect.width/2) h2=parseInt(rect.height/2) that.light() }).exec() }, light(){//跑马灯绘制 let that=this let itemsNum=that.data.itemsNum lamp++ if(lamp>=2){ lamp=0 } ctx2.beginPath() ctx2.arc(w2,h2,w2,0,2*Math.PI)//绘制底色为红色的圆形 ctx2.setFillStyle("#FA7471") ctx2.fill() for(let i=0;i

效果图如下