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

希望給大家?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)}//繪制獎(jiǎng)品名稱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)//繪制扇形，注意下一個(gè)扇形比上一個(gè)扇形多一個(gè)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);//將原點(diǎn)移至圓形圓心位置    ctx.rotate((itemsArc * (i + 2)) * Math.PI / 180);//旋轉(zhuǎn)文字，從 i+2 開始，因?yàn)樯刃问菑臄?shù)學(xué)意義上的第四象限第一個(gè)開始的，文字目前的位置是在圓心正上方，所以起始位置要將其旋轉(zhuǎn)2個(gè)扇形的角度讓其與第一個(gè)扇形的位置一致。    ctx.fillText(that.text[i], 0, -(that.h1 * 0.8));    ctx.restore();//保存繪圖上下文，使上一個(gè)繪制的扇形保存住。  }}  //跑馬燈繪制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)//圓形跑馬燈小圓圈   //跑馬燈第一次閃爍時(shí)與第二次閃爍時(shí)繪制相反的顏色，再配上定時(shí)器循環(huán)閃爍就可以達(dá)到跑馬燈一閃一閃的效果了   if(that.lamp==0){//第一次閃爍時(shí)偶數(shù)奇數(shù)的跑馬燈各繪制一種顏色    if(i%2==0){      ctx2.fillStyle="#FBF1A9";    } else {      ctx2.fillStyle="#fbb936";    }   }else {//第二次閃爍時(shí)偶數(shù)奇數(shù)的跑馬燈顏色對(duì)調(diào)     if (i % 2 == 0) {       ctx2.fillStyle="#fbb936";     } else {       ctx2.fillStyle="#FBF1A9";     }   }   ctx2.fill()   ctx2.restore()//恢復(fù)之前保存的上下文，可以將循環(huán)出來的跑馬燈都保存下來。沒有這一句那么每循環(huán)出一個(gè)跑馬燈則上一個(gè)跑馬燈繪圖將被覆蓋，  } }