快捷導(dǎo)航

大轉(zhuǎn)盤抽獎小程序版轉(zhuǎn)盤抽獎網(wǎng)頁版

更新時間：2020年04月16日 15:31:23 作者：今天也在寫bug

這篇文章主要為大家詳細(xì)介紹了大轉(zhuǎn)盤抽獎小程序版和網(wǎng)頁版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

今天整理了下以前寫的小demo，把大轉(zhuǎn)盤抽獎的代碼，整合下，列了網(wǎng)頁版和小程序兩個版本，這個轉(zhuǎn)盤抽獎的核心是H5的canvas和Css3的translate屬性，非常簡單，寫了網(wǎng)頁版和小程序版供大家參考，主要核心代碼就是利用canvas畫圖，完整代碼見大轉(zhuǎn)盤抽獎，下載可用

希望給大家?guī)韼椭?/p>

//轉(zhuǎn)盤內(nèi)部繪制
lottery.prototype.getCanvasI=function(){
 let itemsArc=360/this.itemsNum //獲取大轉(zhuǎn)盤每等分的角度
 this.itemsArc=itemsArc
 let widthI=canvasI.width
 let heightI=canvasI.height
 this.w1=parseInt(widthI/2)
 this.h1=parseInt(heightI/2)
 this.Items(itemsArc)//每一份扇形的內(nèi)部繪制
 this.mytime=setInterval(this.light.bind(this),1000)
}
//繪制獎品名稱
lottery.prototype.Items=function(e){
 let that=this
 let itemsArc=e//每一分扇形的角度
 let Num=that.itemsNum// 等分?jǐn)?shù)量
 let text=that.text// 放文字的數(shù)組
 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) {//繪制偶數(shù)扇形和奇數(shù)扇形的顏色不同
   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);//旋轉(zhuǎn)文字，從 i+2 開始，因為扇形是從數(shù)學(xué)意義上的第四象限第一個開始的，文字目前的位置是在圓心正上方，所以起始位置要將其旋轉(zhuǎn)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++){//跑馬燈小圓圈比大圓盤等分?jǐn)?shù)量多一倍
  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)//圓形跑馬燈小圓圈
  //跑馬燈第一次閃爍時與第二次閃爍時繪制相反的顏色，再配上定時器循環(huán)閃爍就可以達(dá)到跑馬燈一閃一閃的效果了
  if(that.lamp==0){//第一次閃爍時偶數(shù)奇數(shù)的跑馬燈各繪制一種顏色
  if(i%2==0){
   ctx2.fillStyle="#FBF1A9";
  } else {
   ctx2.fillStyle="#fbb936";
  }
  }else {//第二次閃爍時偶數(shù)奇數(shù)的跑馬燈顏色對調(diào)
   if (i % 2 == 0) {
    ctx2.fillStyle="#fbb936";
   } else {
    ctx2.fillStyle="#FBF1A9";
   }
  }
  ctx2.fill()
  ctx2.restore()//恢復(fù)之前保存的上下文，可以將循環(huán)出來的跑馬燈都保存下來。沒有這一句那么每循環(huán)出一個跑馬燈則上一個跑馬燈繪圖將被覆蓋，
 }
 }

小程序的代碼示例

//事件處理函數(shù)
 onLoad: function (e) {
  let that=this
  let itemsArc=360/that.data.itemsNum //獲取大轉(zhuǎn)盤每等分的角度
  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)//每一份扇形的內(nèi)部繪制
   }).exec()
   mytime=setInterval(that.light,1000)//啟動跑馬燈定時器
  })
 },
 onReady:function () {
  var that=this
  wx.createSelectorQuery().select('#canvas-bg').boundingClientRect(function (rect) {//監(jiān)聽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++){//跑馬燈小圓圈比大圓盤等分?jǐn)?shù)量多一倍
   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)//繪制圓形跑馬燈小圓圈
   //跑馬燈第一次閃爍時與第二次閃爍時繪制相反的顏色，再配上定時器循環(huán)閃爍就可以達(dá)到跑馬燈一閃一閃的效果了
   if(lamp==0){//第一次閃爍時偶數(shù)奇數(shù)的跑馬燈各繪制一種顏色
    if(i%2==0){
     ctx2.setFillStyle("#FBF1A9");
    } else {
     ctx2.setFillStyle("#fbb936");
    }
   }else {//第二次閃爍時偶數(shù)奇數(shù)的跑馬燈顏色對調(diào)
    if (i % 2 == 0) {
     ctx2.setFillStyle("#fbb936");
    } else {
     ctx2.setFillStyle("#FBF1A9");
    }
   }
   ctx2.fill()
   ctx2.restore()//恢復(fù)之前保存的上下文，可以將循環(huán)出來的跑馬燈都保存下來。沒有這一句那么每循環(huán)出一個跑馬燈則上一個跑馬燈繪圖將被覆蓋，
  }
  ctx2.draw()
 },
 Items(e){
  let that=this
  let itemsArc=e//每一分扇形的角度
  let Num=that.data.itemsNum// 等分?jǐn)?shù)量
  let text=that.data.text// 放文字的數(shù)組
  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) {//繪制偶數(shù)扇形和奇數(shù)扇形的顏色不同
    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);//旋轉(zhuǎn)文字，從 i+2 開始，因為扇形是從數(shù)學(xué)意義上的第四象限第一個開始的，文字目前的位置是在圓心正上方，所以起始位置要將其旋轉(zhuǎn)2個扇形的角度讓其與第一個扇形的位置一致。
   ctx.fillText(text[i], 0, -(h1 * 0.8));
   ctx.restore();//保存繪圖上下文，使上一個繪制的扇形保存住。
  }
  // that.Images();
  ctx.draw(true);//參數(shù)為true的時候，保存當(dāng)前畫布的內(nèi)容，繼續(xù)繪制
 },

效果圖如下