React实现大转盘抽奖效果

React利用canvas实现大转盘抽奖效果，效果如下：

大转盘效果

主要代码：

const drawImg = (x, y, r, num, ctx, index, img) => {
  ctx.save();
  ctx.beginPath();
  ctx.translate(x, y);
  ctx.moveTo(0, 0);
  ctx.rotate((index * (2 * Math.PI)) / num);
  // 绘制扇形
  ctx.arc(0, 0, r, (3 * Math.PI) / 2 - Math.PI / num, (3 * Math.PI) / 2 + Math.PI / num, false);
  ctx.fillStyle = '#fff';
  ctx.fill();
  // 绘制边框
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#FFD8BF';
  ctx.stroke();
  // 绘制奖品图片
  // 目标尺寸
  let _tw = r * 0.3;
  let _th = r * 0.3;
  ctx.drawImage(img, -_tw / 2, -y * 0.59, _tw, _th);

  ctx.restore();
  rotateCss(document.getElementById('wheel'), 360 / num / 2);
}

const loadingImg = () => {
  let scale = parseInt(window.devicePixelRatio) || 2;
  let wheelW = wheelWidth * scale;
  let x = wheelW / 2;
  let y = wheelW / 2;
  let r = (wheelW / 2) * 0.8;
  let num = prizeNum;
  let wheel = document.getElementById('wheel');

  wheel.width = wheelW;
  wheel.height = wheelW;

  let ctx = wheel.getContext('2d');
  Object.keys(prizeList).forEach(index => {
    let img = new Image();
    img.onload = () => {
      // 开始画图了
      drawImg(x, y, r, num, ctx, index, img);
    };
    img.src = prizeList[index].rewardPic;
  });
  wheel.style.width = wheel.width / scale + 'px';
  wheel.style.height = wheel.height / scale + 'px';
}

在线试一试