lucky-canvas大转盘怎么写抽奖

1. 首先，需要在HTML中创建一个包含大转盘的容器元素，并在其中添加一个canvas元素。

<div id="lucky-wheel">
  <canvas id="wheel-canvas"></canvas>
</div>

2. 在CSS中设置容器元素的样式，如宽度、高度、背景颜色等。

#lucky-wheel {
  width: 500px;
  height: 500px;
  background-color: #fff;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
}

3. 在JavaScript中编写抽奖逻辑代码。首先需要定义奖品数组，每个奖品包含名称、图片、颜色和概率等信息。

const prizes = [
  { name: '奖品1', image: 'image1.png', color: '#FFA07A', probability: 0.1 },
  { name: '奖品2', image: 'image2.png', color: '#87CEFA', probability: 0.2 },
  { name: '奖品3', image: 'image3.png', color: '#FFD700', probability: 0.3 },
  { name: '奖品4', image: 'image4.png', color: '#00FA9A', probability: 0.4 }
];

4. 接着，需要定义转盘的样式和绘制函数。转盘的样式可以使用CSS中的渐变和阴影等效果来实现。

const wheelStyle = {
  lineWidth: 2,
  strokeStyle: '#000',
  fillStyle: '#fff',
  shadowColor: '#666',
  shadowBlur: 4,
  gradient: {
    startColor: '#fff',
    endColor: '#ccc',
    startX: 0,
    startY: 0,
    endX: 0,
    endY: wheelRadius
  }
};

function drawWheel() {
  ctx.save();
  ctx.translate(wheelCenterX, wheelCenterY);
  ctx.rotate((Math.PI / 180) * wheelAngle);
  ctx.beginPath();
  ctx.arc(0, 0, wheelRadius, 0, Math.PI * 2);
  ctx.lineWidth = wheelStyle.lineWidth;
  ctx.strokeStyle = wheelStyle.strokeStyle;
  ctx.fillStyle = wheelStyle.fillStyle;
  ctx.shadowColor = wheelStyle.shadowColor;
  ctx.shadowBlur = wheelStyle.shadowBlur;
  ctx.shadowOffsetX = 0;
  ctx.shadowOffsetY = 0;
  ctx.stroke();
  ctx.fill();
  ctx.restore();
  drawWheelText();
}

5. 然后，需要定义每个奖品的位置和角度，以及根据概率计算每个奖品在转盘上的占比。

const prizeCount = prizes.length;
const prizeAngle = 360 / prizeCount;
let prizePositions = [];
let prizeProbabilities = [];

for (let i = 0; i < prizeCount; i++) {
  const angle = i * prizeAngle;
  const position = {
    x: wheelCenterX + Math.sin(degToRad(angle)) * (wheelRadius - wheelTextMargin),
    y: wheelCenterY - Math.cos(degToRad(angle)) * (wheelRadius - wheelTextMargin)
  };
  prizePositions.push(position);
  prizeProbabilities.push(prizes[i].probability);
}

const totalProbability = prizeProbabilities.reduce((a, b) => a + b, 0);
const prizeRatios = prizeProbabilities.map(p => p / totalProbability);

6. 接下来，需要编写抽奖函数。该函数首先根据每个奖品的概率计算出随机的中奖结果，然后根据中奖结果的位置和角度旋转转盘，并触发抽奖结束的回调函数。

function startLottery() {
  const random = Math.random();
  let sum = 0;
  for (let i = 0; i < prizeCount; i++) {
    sum += prizeRatios[i];
    if (random <= sum) {
      const prizeIndex = i;
      const prizeAngle = 360 - (prizeIndex * prizeAngle) - (prizeAngle / 2);
      const targetAngle = prizeAngle + 360 * 5;
      const animate = () => {
        if (wheelAngle < targetAngle) {
          wheelAngle += 5;
          drawWheel();
          requestAnimationFrame(animate);
        } else {
          onLotteryEnd(prizes[prizeIndex]);
        }
      };
      requestAnimationFrame(animate);
      break;
    }
  }
}

7. 最后，在初始化函数中调用绘制转盘和绑定抽奖按钮的事件处理函数，即可完成大转盘抽奖的实现。

function init() {
  const canvas = document.getElementById('wheel-canvas');
  canvas.width = wheelWidth;
  canvas.height = wheelHeight;
  ctx = canvas.getContext('2d');
  drawWheel();
  const button = document.getElementById('lottery-button');
  button.addEventListener('click', startLottery);
}