大轉盤抽獎小程序版轉盤抽獎網頁版

2019-11-19 12:14:04

字體：大中小

來源：轉載

供稿：網友

今天整理了下以前寫的小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<Num;i++){    ctx.beginPath()    ctx.moveTo(that.w1,that.h1)    ctx.arc(that.w1,that.h1,that.w1-5,itemsArc * i * Math.PI / 180, (itemsArc + itemsArc * i) * Math.PI / 180)//繪制扇形，注意下一個扇形比上一個扇形多一個itemsArc的角度    ctx.closePath()    if (i % 2 == 0) {//繪制偶數扇形和奇數扇形的顏色不同      ctx.fillStyle=that.color[0]    } else {      ctx.fillStyle=that.color[1]    }    ctx.fill()    ctx.save()    ctx.beginPath()    ctx.fontSize=12    ctx.fillStyle='#000'    ctx.textAlign='center'    ctx.textBaseline='middle'    ctx.translate(that.w1, that.h1);//將原點移至圓形圓心位置    ctx.rotate((itemsArc * (i + 2)) * Math.PI / 180);//旋轉文字，從 i+2 開始，因為扇形是從數學意義上的第四象限第一個開始的，文字目前的位置是在圓心正上方，所以起始位置要將其旋轉2個扇形的角度讓其與第一個扇形的位置一致。    ctx.fillText(that.text[i], 0, -(that.h1 * 0.8));    ctx.restore();//保存繪圖上下文，使上一個繪制的扇形保存住。  }}  //跑馬燈繪制lottery.prototype.light=function(){  var that=this  var itemsNum=that.itemsNum  that.lamp++  if(that.lamp>=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<that.itemsNum*2;i++){//跑馬燈小圓圈比大圓盤等分數量多一倍    ctx2.save()   ctx2.beginPath()   ctx2.translate(that.w2,that.h2)   ctx2.rotate(30*i*Math.PI/180)   ctx2.arc(0,that.h2-10,5,0,2*Math.PI)//圓形跑馬燈小圓圈   //跑馬燈第一次閃爍時與第二次閃爍時繪制相反的顏色，再配上定時器循環閃爍就可以達到跑馬燈一閃一閃的效果了   if(that.lamp==0){//第一次閃爍時偶數奇數的跑馬燈各繪制一種顏色    if(i%2==0){      ctx2.fillStyle="#FBF1A9";    } else {      ctx2.fillStyle="#fbb936";    }   }else {//第二次閃爍時偶數奇數的跑馬燈顏色對調     if (i % 2 == 0) {       ctx2.fillStyle="#fbb936";     } else {       ctx2.fillStyle="#FBF1A9";     }   }   ctx2.fill()   ctx2.restore()//恢復之前保存的上下文，可以將循環出來的跑馬燈都保存下來。沒有這一句那么每循環出一個跑馬燈則上一個跑馬燈繪圖將被覆蓋，  } }

小程序的代碼示例

//事件處理函數  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<itemsNum*2;i++){//跑馬燈小圓圈比大圓盤等分數量多一倍     ctx2.save()      ctx2.beginPath()      ctx2.translate(w2,h2)      ctx2.rotate(30*i*Math.PI/180)      ctx2.arc(0,w2-10,5,0,2*Math.PI)//繪制圓形跑馬燈小圓圈      //跑馬燈第一次閃爍時與第二次閃爍時繪制相反的顏色，再配上定時器循環閃爍就可以達到跑馬燈一閃一閃的效果了      if(lamp==0){//第一次閃爍時偶數奇數的跑馬燈各繪制一種顏色       if(i%2==0){         ctx2.setFillStyle("#FBF1A9");       } else {         ctx2.setFillStyle("#fbb936");       }      }else {//第二次閃爍時偶數奇數的跑馬燈顏色對調        if (i % 2 == 0) {          ctx2.setFillStyle("#fbb936");        } else {          ctx2.setFillStyle("#FBF1A9");        }      }      ctx2.fill()      ctx2.restore()//恢復之前保存的上下文，可以將循環出來的跑馬燈都保存下來。沒有這一句那么每循環出一個跑馬燈則上一個跑馬燈繪圖將被覆蓋，    }    ctx2.draw()  },  Items(e){    let that=this    let itemsArc=e//每一分扇形的角度    let Num=that.data.itemsNum// 等分數量    let text=that.data.text// 放文字的數組    for(let i=0;i<Num;i++){     ctx.beginPath()      ctx.moveTo(w1,h1)      ctx.arc(w1,h1,w1-5,itemsArc * i * Math.PI / 180, (itemsArc + itemsArc * i) * Math.PI / 180)//繪制扇形，注意下一個扇形比上一個扇形多一個itemsArc的角度      ctx.closePath()      if (i % 2 == 0) {//繪制偶數扇形和奇數扇形的顏色不同        ctx.setFillStyle(that.data.color[0])      } else {        ctx.setFillStyle(that.data.color[1])      }      ctx.fill()      ctx.save()      ctx.beginPath()      ctx.setFontSize(12)      ctx.setFillStyle('#000')      ctx.setTextAlign('center')      ctx.setTextBaseline('middle')      ctx.translate(w1, h1);//將原點移至圓形圓心位置      ctx.rotate((itemsArc * (i + 2)) * Math.PI / 180);//旋轉文字，從 i+2 開始，因為扇形是從數學意義上的第四象限第一個開始的，文字目前的位置是在圓心正上方，所以起始位置要將其旋轉2個扇形的角度讓其與第一個扇形的位置一致。      ctx.fillText(text[i], 0, -(h1 * 0.8));      ctx.restore();//保存繪圖上下文，使上一個繪制的扇形保存住。    }    // that.Images();    ctx.draw(true);//參數為true的時候，保存當前畫布的內容，繼續繪制  },

效果圖如下