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

這篇文章主要爲大家詳細介紹了大轉盤抽獎小程序版和網頁版，具有一定的參考價值，感興趣的小夥伴們可以參考一下

今天整理了下以前寫的小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的時候，保存當前畫布的內容，繼續繪製
  },

效果圖如下

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。