成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

HTML5 Canvas的幸運大獎盤特效

現在好的微信微商或者微信公眾號都有這種大轉盤的項目，這里就整理一個，可以參考下。

這是一款基于jquery和HTML5 Canvas的幸運大獎盤特效。該幸運大獎品特效支持移動端，它通過動態構造Canvas元素來生成大獎盤，并通過jquery代碼來隨機獲取獎品。

　　使用方法

　　HTML結構

　　抽獎用的大轉盤使用圖片來制作，開始時它們被隱藏。整個抽獎大獎盤放置在一個容器中，控制容器的大小即可以控制獎盤的大小。

XML/HTML代碼
<div class="container"> 
 <img src="http://www.gimoo.net/t/1810/images/1.png" id="shan-img" style="display:none;" /> 
 <img src="http://www.gimoo.net/t/1810/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="http://www.gimoo.net/t/1810/images/turnplate-pointer.png"/> 
  </div> 
 </div> 
</div> 

　　CSS樣式

　　為大獎盤添加下面的CSS樣式：

CSS代碼

.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%;} 

　　JavaScript

　　整個大獎盤的jquery實現代碼如下：

JavaScript代碼

var turnplate={ 
  restaraunts:[],    //大轉盤獎品名稱 
  colors:[],     //大轉盤獎品區塊對應背景顏色 
  outsideRadius:192,   //大轉盤外圓的半徑 
  textRadius:155,    //大轉盤獎品位置距離圓心的距離 
  insideRadius:68,   //大轉盤內圓的半徑 
  startAngle:0,    //開始角度 
    
  bRotate:false    //false:停止;ture:旋轉 
}; 
  
$(document).ready(function(){ 
 //動態添加大轉盤的獎品與獎品區域背景顏色 
 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('網絡超時，請檢查您的網絡設置！'); 
   } 
  }); 
 }; 
  
 //旋轉轉盤 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; 
  //獲取隨機數(獎品個數范圍內) 
  var item = rnd(1,turnplate.restaraunts.length); 
  //獎品數量等于10,指針落在對應獎品區域的中心角度[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; 
   
} 
  
  
//頁面所有元素加載完畢后執行drawRouletteWheel()方法對轉盤進行渲染 
window.onload=function(){ 
 drawRouletteWheel(); 
}; 
  
function drawRouletteWheel() {   
 var canvas = document.getElementById("wheelcanvas");   
 if (canvas.getContext) { 
  //根據獎品個數計算圓周角度 
  var arc = Math.PI / (turnplate.restaraunts.length/2); 
  var ctx = canvas.getContext("2d"); 
  //在給定矩形內清空一個矩形 
  ctx.clearRect(0,0,422,422); 
  //strokeStyle 屬性設置或返回用于筆觸的顏色、漸變或模式  
  ctx.strokeStyle = "#FFBE04"; 
  //font 屬性設置或返回畫布上文本內容的當前字體屬性 
  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,起始角,結束角,繪制方向) 方法創建弧/曲線（用于創建圓或部分圓）   
   ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);   
   ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true); 
   ctx.stroke();  
   ctx.fill(); 
   //鎖畫布(為了保存之前的畫布狀態) 
   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方法旋轉當前的繪圖 
   ctx.rotate(angle + arc / 2 + Math.PI / 2); 
     
   /** 下面代碼根據獎品類型、獎品名稱長度渲染不同效果，如字體、顏色、圖片效果。(具體根據實際情況改變) **/ 
   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); 
   } 
     
   //添加對應圖標 
   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);  
   } 
   //把當前畫布返回（調整）到上一個save()狀態之前  
   ctx.restore(); 
   //----繪制獎品結束---- 
  }    
 }  
}        

實現效果圖：

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！