XML/HTML代碼
<div class="container"> 
 <img src="images/1.png" id="shan-img" style="display:none;" /> 
 <img src="images/2.png" id="sorry-img" style="display:none;" /> 
 <div class="banner"> 
  <div class="turnplate" style="background-image:url(images/turnplate-bg.png);background-size:100% 100%;"> 
   <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas> 
   <img class="pointer" src="images/turnplate-pointer.png"/> 
  </div> 
 </div> 
</div> 

.banner{display:block;width:95%;margin-left:auto;margin-right:auto;margin-bottom: 20px;} 
.banner .turnplate{display:block;width:100%;position:relative;} 
.banner .turnplate canvas.item{width:100%;} 
.banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:23%;} 

var turnplate={ 
  restaraunts:[],    //大轉(zhuǎn)盤獎品名稱 
  colors:[],     //大轉(zhuǎn)盤獎品區(qū)塊對應(yīng)背景顏色 
  outsideRadius:192,   //大轉(zhuǎn)盤外圓的半徑 
  textRadius:155,    //大轉(zhuǎn)盤獎品位置距離圓心的距離 
  insideRadius:68,   //大轉(zhuǎn)盤內(nèi)圓的半徑 
  startAngle:0,    //開始角度 
    
  bRotate:false    //false:停止;ture:旋轉(zhuǎn) 
}; 
  
$(document).ready(function(){ 
 //動態(tài)添加大轉(zhuǎn)盤的獎品與獎品區(qū)域背景顏色 
 turnplate.restaraunts = ["50M免費流量包", "10金幣", "謝謝參與", "5金幣", "10M免費流量包", "20M免費流量包", "20金幣 ", "30M免費流量包", "100M免費流量包", "2金幣"]; 
 turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"]; 
  
   
 var rotateTimeOut = function (){ 
  $('#wheelcanvas').rotate({ 
   angle:0, 
   animateTo:2160, 
   duration:8000, 
   callback:function (){ 
    alert('網(wǎng)絡(luò)超時，請檢查您的網(wǎng)絡(luò)設(shè)置！'); 
   } 
  }); 
 }; 
  
 //旋轉(zhuǎn)轉(zhuǎn)盤 item:獎品位置; txt：提示語; 
 var rotateFn = function (item, txt){ 
  var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2)); 
  if(angles<270){ 
   angles = 270 - angles;  
  }else{ 
   angles = 360 - angles + 270; 
  } 
  $('#wheelcanvas').stopRotate(); 
  $('#wheelcanvas').rotate({ 
   angle:0, 
   animateTo:angles+1800, 
   duration:8000, 
   callback:function (){ 
    alert(txt); 
    turnplate.bRotate = !turnplate.bRotate; 
   } 
  }); 
 }; 
  
 $('.pointer').click(function (){ 
  if(turnplate.bRotate)return; 
  turnplate.bRotate = !turnplate.bRotate; 
  //獲取隨機數(shù)(獎品個數(shù)范圍內(nèi)) 
  var item = rnd(1,turnplate.restaraunts.length); 
  //獎品數(shù)量等于10,指針落在對應(yīng)獎品區(qū)域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288] 
  rotateFn(item, turnplate.restaraunts[item-1]); 
 }); 
}); 
  
function rnd(n, m){ 
 var random = Math.floor(Math.random()*(m-n+1)+n); 
 return random; 
   
} 
  
  
//頁面所有元素加載完畢后執(zhí)行drawRouletteWheel()方法對轉(zhuǎn)盤進行渲染 
window.onload=function(){ 
 drawRouletteWheel(); 
}; 
  
function drawRouletteWheel() {   
 var canvas = document.getElementById("wheelcanvas");   
 if (canvas.getContext) { 
  //根據(jù)獎品個數(shù)計算圓周角度 
  var arc = Math.PI / (turnplate.restaraunts.length/2); 
  var ctx = canvas.getContext("2d"); 
  //在給定矩形內(nèi)清空一個矩形 
  ctx.clearRect(0,0,422,422); 
  //strokeStyle 屬性設(shè)置或返回用于筆觸的顏色、漸變或模式  
  ctx.strokeStyle = "#FFBE04"; 
  //font 屬性設(shè)置或返回畫布上文本內(nèi)容的當(dāng)前字體屬性 
  ctx.font = '16px Microsoft YaHei';    
  for(var i = 0; i < turnplate.restaraunts.length; i++) {     
   var angle = turnplate.startAngle + i * arc; 
   ctx.fillStyle = turnplate.colors[i]; 
   ctx.beginPath(); 
   //arc(x,y,r,起始角,結(jié)束角,繪制方向) 方法創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）   
   ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);   
   ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true); 
   ctx.stroke();  
   ctx.fill(); 
   //鎖畫布(為了保存之前的畫布狀態(tài)) 
   ctx.save();   
     
   //----繪制獎品開始---- 
   ctx.fillStyle = "#E5302F"; 
   var text = turnplate.restaraunts[i]; 
   var line_height = 17; 
   //translate方法重新映射畫布上的 (0,0) 位置 
   ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius); 
     
   //rotate方法旋轉(zhuǎn)當(dāng)前的繪圖 
   ctx.rotate(angle + arc / 2 + Math.PI / 2); 
     
   /** 下面代碼根據(jù)獎品類型、獎品名稱長度渲染不同效果，如字體、顏色、圖片效果。(具體根據(jù)實際情況改變) **/ 
   if(text.indexOf("M")>0){//流量包 
    var texts = text.split("M"); 
    for(var j = 0; j<texts.length; j++){ 
     ctx.font = j == 0?'bold 20px Microsoft YaHei':'16px Microsoft YaHei'; 
     if(j == 0){ 
      ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height); 
     }else{ 
      ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height); 
     } 
    } 
   }else if(text.indexOf("M") == -1 && text.length>6){//獎品名稱長度超過一定范圍  
    text = text.substring(0,6)+"||"+text.substring(6); 
    var texts = text.split("||"); 
    for(var j = 0; j<texts.length; j++){ 
     ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height); 
    } 
   }else{ 
    //在畫布上繪制填色的文本。文本的默認顏色是黑色 
    //measureText()方法返回包含一個對象，該對象包含以像素計的指定字體寬度 
    ctx.fillText(text, -ctx.measureText(text).width / 2, 0); 
   } 
     
   //添加對應(yīng)圖標(biāo) 
   if(text.indexOf("金幣")>0){ 
    var img= document.getElementById("shan-img"); 
    img.onload=function(){  
     ctx.drawImage(img,-15,10);    
    };  
    ctx.drawImage(img,-15,10);  
   }else if(text.indexOf("謝謝參與")>=0){ 
    var img= document.getElementById("sorry-img"); 
    img.onload=function(){  
     ctx.drawImage(img,-15,10);    
    };  
    ctx.drawImage(img,-15,10);  
   } 
   //把當(dāng)前畫布返回（調(diào)整）到上一個save()狀態(tài)之前  
   ctx.restore(); 
   //----繪制獎品結(jié)束---- 
  }    
 }  
}