jquery 转盘抽奖

HTML

<div class="content">
        <div class="subBox">
          <div class="subBoxTxt">持有金币数</div>
          <div class="codeNum" style="height: 20px; left: 25%"></div>
        </div>
        <img src="./images/3.png" alt="2" class="canHead" />
        <img src="images/jinbi.png" id="fen-img" style="display: none" />
        <img src="images/hb.png" id="zuliao-img" style="display: none" />
        <img src="images/sj.png" id="baowen-img" style="display: none" />
        <img src="images/xxcy.png" id="yundou-img" style="display: none" />
        <img src="images/7.png" id="ganlan-img" style="display: none" />
        <img src="images/4.png" id="yusan-img" style="display: none" />
        <div class="banner">
          <div class="turnplate">
            <img src="./images/circle.png" alt="circle" class="pointer" />
            <canvas
              class="item"
              id="wheelcanvas"
              width="422px"
              height="422px"
              style="margin: -2px 0 0 2px"
            ></canvas>
            <img
              class="pointer pointerstar"
              src="images/turnplate-pointer.png"
            />
            <img
              class="pointer pointerover"
              src="images/turnplate-pointerOver.png"
              style="display: none"
            />
          </div>
</div>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/awardRotate.js"></script>
<script>
window.onload = function () {
        drawRouletteWheel();
        // 获取宝箱信息
        retNum();
      };
var turnplate = {
        restaraunts: [], //大转盘奖品名称
        colors: [], //大转盘奖品区块对应背景颜色
        outsideRadius: 192, //大转盘外圆的半径
        textRadius: 155, //大转盘奖品位置距离圆心的距离
        insideRadius: 0, //大转盘内圆的半径
        startAngle: 0, //开始角度
        bRotate: false, //false:停止;ture:旋转
      };
      // var token = window.jsinterface.getToken();
      // console.log('token', token);
      // $(document).ready(function () {
      //动态添加大转盘的奖品与奖品区域背景颜色
      turnplate.restaraunts = [
        '时间币',
        '红包',
        '时间币',
        '手机',
        '红包',
        '时间币',
        '红包',
        '谢谢参与',
      ];
      turnplate.colors = [
        '#8e2ed0',
        '#8714e7',
        '#8e2ed0',
        '#8714e7',
        '#8e2ed0',
        '#8714e7',
        '#8e2ed0',
        '#8714e7',
      ];
      var rotateTimeOut = function () {
        $('#wheelcanvas').rotate({
          angle: 0,
          animateTo: 2160,
          duration: 3000,
          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;
        }
        console.log('item', item);
        $('#wheelcanvas').stopRotate();
        $('#wheelcanvas').rotate({
          angle: 0,
          animateTo: angles + 1800,
          duration: 3000,
          callback: function () {
            //中奖提示
            console.log('抽中的回调item', item);
            if (txt.indexOf('时间') >= 0) {
              coinup(1);
            } else if (txt.indexOf('红包') >= 0) {
              coinup(2);
              // var message = {
              //   type: 2, //1时间币  2红包  3手机  4谢谢参与
              //   coin: 0,
              // };
              // if (window.jsinterface) {
              //   window.jsinterface.reward(JSON.stringify(message));
              // }
            } else {
              // alert('歇息');
            }
            turnplate.bRotate = !turnplate.bRotate;
            $('.pointerover').hide();
            $('.pointerstar').show();
          },
        });
      };
      $('.pointer').click(function () {
        $('.pointerover').show();
        $('.pointerstar').hide();
        if (turnplate.bRotate) return;
        turnplate.bRotate = !turnplate.bRotate;
        // 判断是否超过次数或者判断是否超过金币上限
        
      });
      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 = 'rgba(0, 0, 0, 0)';
          //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 = 'rgba(0, 0, 0, 0)';
            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('fen-img');

              ctx.drawImage(img, -46, -10);
            } else if (text.indexOf('红包') >= 0) {
              var img = document.getElementById('zuliao-img');

              ctx.drawImage(img, -46, -10);
            } else if (text.indexOf('手机') >= 0) {
              var img = document.getElementById('baowen-img');

              ctx.drawImage(img, -46, -10);
            } else if (text.indexOf('谢谢参与') >= 0) {
              var img = document.getElementById('yundou-img');

              ctx.drawImage(img, -46, -10);
            } else if (text.indexOf('时间') >= 0) {
              var img = document.getElementById('ganlan-img');

              ctx.drawImage(img, -46, -10);
            } else if (text.indexOf('雨伞') >= 0) {
              var img = document.getElementById('yusan-img');
              // img.onload = function () {
              //   ctx.drawImage(img, 35, 35);
              // };
              ctx.drawImage(img, -46, -10);
            }
            //把当前画布返回（调整）到上一个save()状态之前
            ctx.restore();
            //----绘制奖品结束----
          }
        }
      }
</script>

CSS

/* 大转盘样式 */
.content {
  width: 100%;
  height: auto;
  margin: 0px auto;
  margin-top: 30px;
  position: relative;
}
.canHead {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -4px;
  width: 100px;
  height: 36px;
  z-index: 99999999;
}
.banner {
  display: block;
  width: 79%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}
.turnCicle {
  display: block;
  width: 376px;
  height: 376px;
  position: absolute;
  left: -25px;
  top: -20px;
  z-index: 0;
}
.banner .turnplate {
  display: block;
  width: 100%;
  position: relative;
}
.banner .turnplate canvas.item {
  width: 100%;
}
.banner .turnplate img.pointer {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99999;
}
.pointerImg {
  display: block;
  position: absolute;
  width: 20% !important;
  height: 20% !important;
  left: 50% !important;
  top: 50% !important;
}