SOURCE

window.addEventListener('load', function() {
  var num = 6; // 奖品数量
  if (num % 2 !== 0) {
    alert('请配置偶数奖项');
  }
  var canvas = document.getElementById('canvas');
  var btn = document.getElementById('btn');
  if (!canvas.getContext) {
    alert('抱歉！浏览器不支持。');
    return;
  }
  // 获取绘图上下文
  var ctx = canvas.getContext('2d');
  for (var i = 0; i < num; i++) {
    // 保存当前状态
    ctx.save();
    // 开始一条新路径
    ctx.beginPath();
    // 位移到圆心，下面需要围绕圆心旋转
    ctx.translate(150, 150);
    // 从(0, 0)坐标开始定义一条新的子路径
    ctx.moveTo(0, 0);
    // 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
    ctx.rotate((360 / num * i + 360 / num / 2) * Math.PI / 180);
    // 绘制圆弧
    ctx.arc(0, 0, 150, 0, 2 * Math.PI / num, false);
    if (i % 2 == 0) {
      ctx.fillStyle = '#ffb820';
    } else {
      ctx.fillStyle = '#ffcb3f';
    }
    // 填充扇形
    ctx.fill();
    // 绘制边框
    ctx.lineWidth = 0.5;
    ctx.strokeStyle = '#f48d24';
    ctx.stroke();

    // 文字
    ctx.fillStyle = '#fff';
    ctx.font = "16px sans-serif";
    ctx.fillText(i + 1, 100, 60);

    // 恢复前一个状态
    ctx.restore();
  }

  // 抽奖
  var degr = 1800;
  btn.onclick = function() {
    canvas.style.transform = "rotate(" + (degr + Math.random() * 360) + "deg)";
    degr = degr + 1800;
  }


}, false);

<div id="turntable">
  <canvas id="canvas" width="300" height="300"></canvas>
  <a id="btn" href="javascript:;">抽奖</a>
</div>

#turntable {
  position: relative;
}

#canvas {
  //border: 1px solid #000;
  -webkit-transform: all 6s ease;
  transition: all 6s ease;
}

#btn {
  position: absolute;
  left: 120px;
  top: 120px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fff;
  line-height: 60px;
  text-align: center;
}

#btn:after {
  position: absolute;
  display: block;
  content: '';
  left: 10px;
  top: -32px;
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 20px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #fff;
}