HTML5 Canvas圓盤抽獎應用（適用於Vue項目）

時間 2019-11-18
標籤 html5 html canvas 圓盤抽獎應用適用於 vue 項目欄目 HTML5 简体版
原文原文鏈接
<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <title>HTML5 Canvas圓盤抽獎應用DEMO演示</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <style>
    * {
      padding: 0px;
      margin: 0px;
      font-size: 16px;
      font-family: "Microsoft YaHei";
    }

    .xttblog_box {
      width: 300px;
      height: 300px;
      margin: 100px auto;
      position: relative;
    }

    .xttblog_box canvas {
      position: absolute;
    }

    #xttblog {
      background-color: white;
      border-radius: 100%;
    }

    #xttblog01,
    #xttblog03 {
      left: 50px;
      top: 50px;
      z-index: 30;
    }

    #xttblog02 {
      left: 75px;
      top: 75px;
      z-index: 20;
    }

    #xttblog {
      -o-transform: transform 6s;
      -ms-transform: transform 6s;
      -moz-transform: transform 6s;
      -webkit-transform: transform 6s;
      transition: transform 6s;
      -o-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      -moz-transform-origin: 50% 50%;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
    }

    .taoge_btn {
      width: 60px;
      height: 60px;
      left: 120px;
      top: 120px;
      border-radius: 100%;
      position: absolute;
      cursor: pointer;
      border: none;
      background: transparent;
      outline: none;
      z-index: 40;
    }
  </style>
  <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      //旋轉角度
      var angles;
      //旋轉次數
      var rotNum = 0;
      //中獎公告
      var notice = null;
      //轉盤初始化各樣式顏色
      var color = ["#ffefbf", "#ffbb04", "#e72c2c", "#DCC722", "#f4a005", "#cb1418"];
      // 後臺獲取獎品替換數據
      var info = ["1", "2", " 3", " 4", " 5", " 6"];
      canvasRun();
      $('#tupBtn').bind('click', function () {
        //轉盤旋轉
        runCup();
        //轉盤旋轉過程「開始抽獎」按鈕沒法點擊
        $('#tupBtn').attr("disabled", true);
        //「開始抽獎」按鈕沒法點擊恢復點擊
        setTimeout(function () {
          alert('中獎拉')
          $('#tupBtn').removeAttr("disabled", true);
        }, 6000);
      });

      //轉盤旋轉 
      function runCup() {
        var num = null
        //獲取隨機數0-5 取回獲獎數據下標代替 此處獲取獲獎數據使用異步方法
        var num = parseInt(Math.random() * (5 - 0 + 0) + 0);
        // 記錄旋轉的次數，依次疊加旋轉度數，防止往回倒轉  transform屬性的值必須依次增長，不然會發生倒轉
        rotNum = rotNum + 1

        if(num !== null) {
          //  旋轉角度 = 旋轉6圈（2160度）* 已經旋轉的次數 + 最少旋轉的圈數（5圈）+ 每一個獎品下標對應的角度
          angles = 2160 * rotNum + 1800 + 360 / info.length * (info.length - num);
        } else {
          angles = 2160 * rotNum + 1800 
        }
        var degValue = 'rotate(' + angles + 'deg' + ')';
        $('#xttblog').css('transform', degValue);
        // 若是沒有獲取到獲獎數據繼續轉動
        if(num === null) {
          runCup();
        }
      }

      //繪製轉盤
      function canvasRun() {
        var canvas = document.getElementById('xttblog');
        var canvas01 = document.getElementById('xttblog01');
        var canvas03 = document.getElementById('xttblog03');
        var canvas02 = document.getElementById('xttblog02');
        var ctx = canvas.getContext('2d');
        var ctx1 = canvas01.getContext('2d');
        var ctx3 = canvas03.getContext('2d');
        var ctx2 = canvas02.getContext('2d');
        createCircle();
        createCirText(); // 繪製文字
        initPoint(); // 繪製指針

        //外圓
        function createCircle() {
          var startAngle = 0; //扇形的開始弧度
          var endAngle = 0; //扇形的終止弧度
          //畫一個等份扇形組成的圓形
          for (var i = 0; i < info.length; i++) {
            startAngle = Math.PI * (i / (info.length / 2) - 2 / info.length);
            endAngle = startAngle + Math.PI * (1 / (info.length / 2));

            ctx.save(); // 保存備份
            ctx.beginPath(); // 繪製兩條線
            ctx.arc(150, 150, 100, startAngle, endAngle, false); // 繪製圓
            ctx.lineWidth = 120;
            if (i % 2 == 0) { // 繪製顏色
              ctx.strokeStyle = color[1];
            } else {
              ctx.strokeStyle = color[0];
            }
            ctx.stroke();
            ctx.restore();
          }
        }

        //各獎項
        function createCirText() {
          ctx.textAlign = 'start';
          ctx.textBaseline = 'middle';
          ctx.fillStyle = color[3];
          var step = 2 * Math.PI / info.length;
          for (var i = 0; i < 6; i++) {
            ctx.save();
            ctx.beginPath();
            ctx.translate(150, 150);
            ctx.rotate(i * step);
            ctx.font = " 20px Microsoft YaHei";
            ctx.fillStyle = color[3];
            ctx.fillText(info[i], -30, -100, 60); // 書寫轉盤文字
            ctx.font = " 14px Microsoft YaHei";
            ctx.closePath();
            ctx.restore();
          }
        }


        //箭頭指針
        function initPoint() {
          //箭頭指針
          ctx1.beginPath();
          ctx1.moveTo(100, 24);
          ctx1.lineTo(90, 62);
          ctx1.lineTo(110, 62);
          ctx1.lineTo(100, 24);
          ctx1.fillStyle = color[5]; // 指針顏色
          ctx1.fill();
          ctx1.closePath();
          //中間圓圈
          ctx2.beginPath();
          ctx2.arc(75, 75, 50, 0, Math.PI * 2, false); // 建立一個圓
          ctx2.fillStyle = color[2]; // 顏色
          ctx2.fill();
          ctx2.closePath();
          //中間小圓
          ctx3.beginPath();
          ctx3.arc(100, 100, 40, 0, Math.PI * 2, false);
          ctx3.fillStyle = color[5];
          ctx3.fill();
          ctx3.closePath();
          //小圓文字
          ctx3.font = "Bold 20px Microsoft YaHei";
          ctx3.textAlign = 'start';
          ctx3.textBaseline = 'middle';
          ctx3.fillStyle = color[4]; //抽獎文字顏色
          ctx3.beginPath();
          ctx3.fillText('開始', 80, 90, 40);
          ctx3.fillText('抽獎', 80, 110, 40);
          ctx3.fill();
          ctx3.closePath();
        }
      }
    });
  </script>
</head>

<body>
  <div class="xttblog_box">
    <canvas id="xttblog" width="300px" height="300px">抱歉！瀏覽器不支持。</canvas>
    <canvas id="xttblog01" width="200px" height="200px">抱歉！瀏覽器不支持。</canvas>
    <canvas id="xttblog03" width="200px" height="200px">抱歉！瀏覽器不支持。</canvas>
    <canvas id="xttblog02" width="150px" height="150px">抱歉！瀏覽器不支持。</canvas>
    <button id="tupBtn" class="taoge_btn"></button>
  </div>
</body>

</html>