Luck-Draw/src/assets/js/zhuanpan.js

var turnplate={
  restaraunts:[],				//大转盘奖品名称
  colors:[],					//大转盘奖品区块对应背景颜色
  outsideRadius:192,			//大转盘外圆的半径
  textRadius:155,				//大转盘奖品位置距离圆心的距离
  insideRadius:68,			//大转盘内圆的半径
  startAngle:0,				//开始角度
  bRotate:false				//false:停止;ture:旋转
};



num=-1
$(document).ready(function(){
  //var chooseid = $( "span[name='zhidui']").attr('id');
  $("span[name='aaa']").on("click",function(){
    console.log($(this).html())
    if($(this).html()=="钦州支队"){
      turnplate.restaraunts = ["广西东油沥青有限公司", "钦州吾悦广场", "钦州天亿石化有限公司"];
      turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6"];
      num=0
      if(window.localStorage["0"]==undefined)
      {
        $("#zhuanpan").show()
        $("#end").hide();
        $("#jieguo").empty()
      }else{
        $("#zhuanpan").hide()
        $("#end").show();
        $("#jieguo").empty()
        $("#jieguo").append("您的抽签结果为：</br>钦州吾悦广场")
      }
      drawRouletteWheel()
    }else if($(this).html()=="南宁支队")
    {
      turnplate.restaraunts = ["九洲国际（超高层）", "南宁国际会展中心", "维景国际酒店", "荔园山庄 "];
      turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; 
      num=1
      if(window.localStorage["1"]==undefined)
      {
        $("#zhuanpan").show()
        $("#end").hide();
        $("#jieguo").empty()
      }else{
        $("#zhuanpan").hide()
        $("#end").show();
        $("#jieguo").empty()
        $("#jieguo").append("您的抽签结果为：</br>九洲国际（超高层）")
      }
      drawRouletteWheel()
    }else if($(this).html()=="柳州支队")
    {
      turnplate.restaraunts = ["广西柳州莲花山庄", "柳州万达广场", "龙城地下商业街", "板栗园加气站 ","地王财富中心"];
      turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"]; 
      num=2
      if(window.localStorage["2"]==undefined)
      {
        $("#zhuanpan").show()
        $("#end").hide();
        $("#jieguo").empty()
      }else{
        $("#zhuanpan").hide()
        $("#end").show();
        $("#jieguo").empty()
        $("#jieguo").append("您的抽签结果为：</br>"+window.localStorage["2"])
      }
      drawRouletteWheel()
    }else if($(this).html()=="河池支队")
    {
      turnplate.restaraunts = ["河池市中石化金城江油库", "河池市宜州区地下商业街", "南城百货（地下） ","宁铁燃气有限责任公司","广西河池市大洋购物中心"];
      turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"]; 
      num=3
      if(window.localStorage["3"]==undefined)
      {
        $("#zhuanpan").show()
        $("#end").hide();
        $("#jieguo").empty()
      }else{
        $("#zhuanpan").hide()
        $("#end").show();
        $("#jieguo").empty()
        $("#jieguo").append("您的抽签结果为：</br>"+window.localStorage["3"])
      }
      drawRouletteWheel()
    }else if($(this).html()=="来宾支队")
    {
      turnplate.restaraunts = ["来宾饭店（高层）", "宝晨化工", "天成百货（地下） ","百悦商业广场(地下）","来宾市方盛广场（人员密集）"];
      turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"]; 
      num=4
      if(window.localStorage["4"]==undefined)
      {
        $("#zhuanpan").show()
        $("#end").hide();
        $("#jieguo").empty()
      }else{
        $("#zhuanpan").hide()
        $("#end").show();
        $("#jieguo").empty()
        $("#jieguo").append("您的抽签结果为：</br>"+window.localStorage["4"])
      }
      drawRouletteWheel()
    }else if($(this).html()=="贺州支队")
    {
      turnplate.restaraunts = ["贺州市国际酒店（高层）", "宝晨化工有限公司", "贺州市南宁百货大楼", "远东国贸地下停车场 "];
      turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; 
      num=5
      if(window.localStorage["5"]==undefined)
      {
        $("#zhuanpan").show()
        $("#end").hide();
        $("#jieguo").empty()
      }else{
        $("#zhuanpan").hide()
        $("#end").show();
        $("#jieguo").empty()
        $("#jieguo").append("您的抽签结果为：</br>"+window.localStorage["5"])
      }
      drawRouletteWheel()
    }
    else if($(this).html()=="防城港支队")
    {
      turnplate.restaraunts = ["防城港供电局", "北京华联超市桂海东盟店", "港宸国际大酒店（高层）", "永旺天和商贸有限公司(只做地下一） ",  "广西中油能源有限公司 ","中海油广西防城港天然气有限责任公司 "];
      turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; 
      num=6
      if(window.localStorage["6"]==undefined)
      {
        $("#zhuanpan").show()
        $("#end").hide();
        $("#jieguo").empty()
      }else{
        $("#zhuanpan").hide()
        $("#end").show();
        $("#jieguo").empty()
        $("#jieguo").append("您的抽签结果为：</br>"+window.localStorage["6"])
      }
      drawRouletteWheel()
    }else if($(this).html()=="崇左支队")
    {
      turnplate.restaraunts = ["崇左油库","崇左市雅图影视广场（6层商场）"];
      turnplate.colors = ["#FFF4D6", "#FFFFFF"]; 
      num=7
      if(window.localStorage["7"]==undefined)
      {
        $("#zhuanpan").show()
        $("#end").hide();
        $("#jieguo").empty()
      }else{
        $("#zhuanpan").hide()
        $("#end").show();
        $("#jieguo").empty()
        $("#jieguo").append("您的抽签结果为：</br>"+window.localStorage["7"])
      }
      drawRouletteWheel()
    }else if($(this).html()=="贵港支队")
    {
      turnplate.restaraunts = ["广西威汉鞋业有限公司", "贵港市嘉龙海杰电子科技有限公司", "贵港市覃塘区人民医院综合楼", "贵港市中国石油分公司油库 ", "维多利亚酒店（高层）","平南中心购物广场（地下）"];
      turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; 
      num=8
      if(window.localStorage["8"]==undefined)
      {
        $("#zhuanpan").show()
        $("#end").hide();
        $("#jieguo").empty()
      }else{
        $("#zhuanpan").hide()
        $("#end").show();
        $("#jieguo").empty()
        $("#jieguo").append("您的抽签结果为：</br>"+window.localStorage["8"])
      }
      drawRouletteWheel()
    }else if($(this).html()=="梧州支队")
    {
      turnplate.restaraunts = ["广西威汉鞋业有限公司", "贵港市嘉龙海杰电子科技有限公司", "贵港市覃塘区人民医院综合楼", "贵港市中国石油分公司油库 ", "梧州市中石化火山油库","平南中心购物广场（地下）", ];
      turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; 
      num=9
      if(window.localStorage["9"]==undefined)
      {
        $("#zhuanpan").show()
        $("#end").hide();
        $("#jieguo").empty()
      }else{
        $("#zhuanpan").hide()
        $("#end").show();
        $("#jieguo").empty()
        $("#jieguo").append("您的抽签结果为：</br>"+window.localStorage["9"])
      }
      drawRouletteWheel()
    }else if($(this).html()=="百色支队")
    {
      turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） "];
      turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; 
      num=10
      if(window.localStorage["10"]==undefined)
      {
        $("#zhuanpan").show()
        $("#end").hide();
        $("#jieguo").empty()
      }else{
        $("#zhuanpan").hide()
        $("#end").show();
        $("#jieguo").empty()
        $("#jieguo").append("您的抽签结果为：</br>"+window.localStorage["10"])
      }
      drawRouletteWheel()
    }else if($(this).html()=="玉林支队")
    {
      turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） ","玉林市中医医院"];
      turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6"]; 
      num=11
      if(window.localStorage["11"]==undefined)
      {
        $("#zhuanpan").show()
        $("#end").hide();
        $("#jieguo").empty()
      }else{
        $("#zhuanpan").hide()
        $("#end").show();
        $("#jieguo").empty()
        $("#jieguo").append("您的抽签结果为：</br>"+window.localStorage["11"])
      }
      drawRouletteWheel()
    }else if($(this).html()=="北海支队")
    {
      turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） ","和安宁春城（大型城市综合体）"];
      turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6"]; 
      num=12
      if(window.localStorage["12"]==undefined)
      {
        $("#zhuanpan").show()
        $("#end").hide();
        $("#jieguo").empty()
      }else{
        $("#zhuanpan").hide()
        $("#end").show();
        $("#jieguo").empty()
        $("#jieguo").append("您的抽签结果为：</br>"+window.localStorage["12"])
      }
      drawRouletteWheel()
    }else if($(this).html()=="桂林支队")
    {
      turnplate.restaraunts = ["兴安油库", "宏谋酒店（高层）"];
      turnplate.colors = ["#FFF4D6", "#FFFFFF"]; 
      num=13
      if(window.localStorage["13"]==undefined)
      {
        $("#zhuanpan").show()
        $("#end").hide();
        $("#jieguo").empty()
      }else{
        $("#zhuanpan").hide()
        $("#end").show();
        $("#jieguo").empty()
        $("#jieguo").append("您的抽签结果为：</br>"+window.localStorage["13"])
      }
      drawRouletteWheel()
    }
	});
  console.log(turnplate.restaraunts)
//动态添加大转盘的奖品与奖品区域背景颜色
/* turnplate.restaraunts = ["广西东油沥青有限公司", "钦州天亿石化有限公司", "九洲国际（超高层）", "南宁国际会展中心 ", "维景国际酒店", "荔园山庄"];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"];  */
/* turnplate.restaraunts = ["白云边", "关公坊", "黄鹤楼", "国宝 ", "陈克明", "金沙河", "雪花", "康师傅", "脉动","奥星","金龙鱼","中昌"];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#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 (){
      console.log(turnplate.restaraunts.length)
      $("#zhuanpan").hide()
      $("#end").show();
      var dataLength=turnplate.restaraunts.length
      if(num==0){
        window.localStorage.setItem( 0, "钦州吾悦广场");
        $("#jieguo").append("您的抽签结果为：</br>钦州吾悦广场")
      }else if(num==1){
        window.localStorage.setItem( 1, "九洲国际（超高层）");
        $("#jieguo").append("您的抽签结果为：</br>九洲国际（超高层）")
      }else if(num==2){
        window.localStorage.setItem( 2, "地王财富中心");
        $("#jieguo").append("您的抽签结果为：</br>地王财富中心")
      }else if(num==3){
        window.localStorage.setItem( 3, "广西河池市大洋购物中心");
        $("#jieguo").append("您的抽签结果为：</br>广西河池市大洋购物中心")
      }
      else if(num==4){
        window.localStorage.setItem( 4, "来宾市方盛广场（人员密集）");
        $("#jieguo").append("您的抽签结果为：</br>来宾市方盛广场（人员密集）")
      }else if(num==5){
        window.localStorage.setItem( 5, "贺州市国际酒店（高层）");
        $("#jieguo").append("您的抽签结果为：</br>贺州市国际酒店（高层）")
      }else if(num==6){
        window.localStorage.setItem( 6, "广西中油能源有限公司");
        $("#jieguo").append("您的抽签结果为：</br>广西中油能源有限公司")
      }else if(num==7){
        window.localStorage.setItem( 7, "崇左油库");
        $("#jieguo").append("您的抽签结果为：</br>崇左油库")
      }else if(num==8){
        window.localStorage.setItem( 8, "维多利亚酒店（高层）");
        $("#jieguo").append("您的抽签结果为：</br>维多利亚酒店（高层）")
      }else if(num==9){
        window.localStorage.setItem( 9, "梧州市中石化火山油库");
        $("#jieguo").append("您的抽签结果为：</br>梧州市中石化火山油库")
      }else if(num==10){
        window.localStorage.setItem( 10, "平果地下商业街");
        $("#jieguo").append("您的抽签结果为：</br>平果地下商业街")
      }else if(num==11){
        window.localStorage.setItem( 11, "玉林市中医医院");
        $("#jieguo").append("您的抽签结果为：</br>玉林市中医医院")
      }else if(num==12){
        window.localStorage.setItem( 12, "和安宁春城（大型城市综合体）");
        $("#jieguo").append("您的抽签结果为：</br>和安宁春城（大型城市综合体）")
      }else if(num==13){
        window.localStorage.setItem( 13, "兴安油库");
        $("#jieguo").append("您的抽签结果为：</br>兴安油库")
      }
      /* if(dataLength>=5)
      {
          $("#jieguo").append("您的抽签结果为：</br>"+turnplate.restaraunts[4])
      }else if(dataLength==3){
        $("#jieguo").append("您的抽签结果为：</br>"+turnplate.restaraunts[1])
      }
      else{
        $("#jieguo").append("您的抽签结果为：</br>"+turnplate.restaraunts[0])
      } */
      turnplate.bRotate = !turnplate.bRotate;
    }
  });
};

$('.pointer').click(function (){
  if(turnplate.bRotate)return;
  turnplate.bRotate = !turnplate.bRotate;
  //获取随机数(奖品个数范围内)
  var item = rnd(1,turnplate.restaraunts.length);
  console.log(item)
  //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
  rotateFn(item, turnplate.restaraunts[item-1]);
   /* switch (item) {
    case 1:
      rotateFn(252, turnplate.restaraunts[0]);
      break;
    case 2:
      rotateFn(216, turnplate.restaraunts[1]);
      break;
    case 3:
      rotateFn(180, turnplate.restaraunts[2]);
      break;
    case 4:
      rotateFn(144, turnplate.restaraunts[3]);
      break;
    case 5:
      rotateFn(108, turnplate.restaraunts[4]);
      break;
    case 6:
      rotateFn(72, turnplate.restaraunts[5]);
      break;
    case 7:
      rotateFn(36, turnplate.restaraunts[6]);
      break;
    case 8:
      rotateFn(360, turnplate.restaraunts[7]);
      break;
    case 9:
      rotateFn(324, turnplate.restaraunts[8]);
      break;
    case 10:
      rotateFn(288, turnplate.restaraunts[9]);
      break;
  }  */
  console.log(item);
});
});

//控制中奖结果
function rnd(n, m){
var random = 5;
//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();
    //----绘制奖品结束----
  }     
} 
}