js 怎么实现大转盘加开始 和停止按钮

要实现大转盘加开始和停止按钮，需要使用 JavaScript 和 HTML5 的 canvas 元素。以下是一个简单的示例代码：

HTML 部分：

<canvas id="canvas" width="400" height="400"></canvas>
<button id="startBtn">开始</button>
<button id="stopBtn">停止</button>

JavaScript 部分：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF00FF']; // 颜色数组
var angles = [0, 60, 120, 180, 240, 300]; // 每个扇形的角度
var prizes = ['奖品1', '奖品2', '奖品3', '奖品4', '奖品5', '奖品6']; // 奖品数组

var startBtn = document.getElementById('startBtn');
var stopBtn = document.getElementById('stopBtn');

var isRunning = false; // 是否正在旋转
var prizeIndex = -1; // 中奖索引

// 绘制转盘
function drawWheel() {
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = Math.min(centerX, centerY) - 10;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < angles.length; i++) {
    var angle = angles[i];
    var color = colors[i % colors.length];

    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.arc(centerX, centerY, radius, angle * Math.PI / 180, (angle + 60) * Math.PI / 180);
    ctx.closePath();

    ctx.fillStyle = color;
    ctx.fill();

    ctx.font = 'bold 20px Arial';
    ctx.fillStyle = '#FFFFFF';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.save();
    ctx.translate(centerX, centerY);
    ctx.rotate((angle + 30) * Math.PI / 180);
    ctx.fillText(prizes[i], radius / 2, 0);
    ctx.restore();
  }
}

// 开始旋转
function start() {
  if (!isRunning) {
    isRunning = true;
    prizeIndex = -1;

    var timer = setInterval(function() {
      drawWheel();

      var randomAngle = Math.floor(Math.random() * 360);
      var rotateAngle = randomAngle + 360 * 5; // 至少旋转 5 圈
      ctx.save();
      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.rotate(rotateAngle * Math.PI / 180);
      ctx.translate(-canvas.width / 2, -canvas.height / 2);
      drawWheel();
      ctx.restore();
    }, 100);

    setTimeout(function() {
      clearInterval(timer);

      var angle = Math.floor((randomAngle + 30) / 60);
      prizeIndex = angle;
      alert('恭喜您获得：' + prizes[prizeIndex]);

      isRunning = false;
    }, 5000);
  }
}

// 停止旋转
function stop() {
  if (isRunning) {
    clearInterval(timer);
    isRunning = false;
  }
}

// 绑定事件
startBtn.addEventListener('click', start);
stopBtn.addEventListener('click', stop);

// 初始化
drawWheel();

在这个示例中，我们使用 canvas 绘制了一个有 6 个扇形的圆形，每个扇形都有不同的颜色和奖品名称。当点击“开始”按钮时，会启动一个定时器来不断旋转转盘，直到 5 秒后停止。当停止后，会计算出中奖的扇形索引，并弹出一个提示框显示中奖信息。当点击“停止”按钮时，会停止旋转。