微信小程序轮盘抽奖代码

以下是一个简单的微信小程序轮盘抽奖代码示例：

1. 在 `index.wxml` 文件中添加以下代码：

<canvas canvas-id="lottery" style="width: 100%; height: 100%;"></canvas>
<button bindtap="startLottery">开始抽奖</button>

2. 在 `index.js` 文件中添加以下代码：

Page({
  data: {
    canvasWidth: 0,
    canvasHeight: 0,
    lotteryCtx: null,
    lotteryData: [
      { id: 1, name: '奖品1' },
      { id: 2, name: '奖品2' },
      { id: 3, name: '奖品3' },
      { id: 4, name: '奖品4' },
      { id: 5, name: '奖品5' },
      { id: 6, name: '奖品6' },
      { id: 7, name: '奖品7' },
      { id: 8, name: '奖品8' },
      { id: 9, name: '奖品9' },
      { id: 10, name: '奖品10' },
    ],
    lotteryIndex: -1,
    lotteryResult: null,
    lotteryRunning: false,
  },

  onReady: function () {
    const query = wx.createSelectorQuery();
    query.select("#lottery").boundingClientRect((rect) => {
      this.setData({
        canvasWidth: rect.width,
        canvasHeight: rect.height,
      });
      const ctx = wx.createCanvasContext("lottery");
      this.setData({
        lotteryCtx: ctx,
      });
      this.drawLottery();
    }).exec();
  },

  drawLottery: function () {
    const ctx = this.data.lotteryCtx;
    const width = this.data.canvasWidth;
    const height = this.data.canvasHeight;

    // 绘制外圆
    ctx.beginPath();
    ctx.setStrokeStyle("#f5f5f5");
    ctx.setLineWidth(0.5);
    ctx.arc(width / 2, height / 2, width / 2 - 10, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.closePath();

    // 绘制内圆
    ctx.beginPath();
    ctx.setLineWidth(0.5);
    ctx.setStrokeStyle("#f5f5f5");
    ctx.arc(width / 2, height / 2, width / 2 - 60, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.closePath();

    // 绘制扇形
    const data = this.data.lotteryData;
    const len = data.length;
    ctx.translate(width / 2, height / 2);
    const angle = 2 * Math.PI / len;
    for (let i = 0; i < len; i++) {
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.setFillStyle("#fff");
      ctx.arc(0, 0, width / 2 - 35, i * angle, (i + 1) * angle);
      ctx.closePath();
      ctx.fill();

      ctx.save();
      ctx.rotate(i * angle + angle / 2);
      ctx.setFillStyle("#000");
      ctx.setFontSize(16);
      ctx.setTextAlign("center");
      ctx.setTextBaseline("middle");
      ctx.fillText(data[i].name, 0, - width / 2 + 55);
      ctx.restore();
    }
    ctx.draw();
  },

  startLottery: function () {
    if (this.data.lotteryRunning) {
      return;
    }
    this.setData({
      lotteryRunning: true,
    });
    const data = this.data.lotteryData;
    const len = data.length;
    const index = Math.floor(Math.random() * len);
    const angle = 360 / len;
    const startAngle = 270 - (index + 0.5) * angle;
    const endAngle = startAngle + 360 * 5 + angle;

    const ctx = this.data.lotteryCtx;
    const width = this.data.canvasWidth;
    const height = this.data.canvasHeight;
    const centerX = width / 2;
    const centerY = height / 2;
    const radius = width / 2 - 10;
    const step = 0.1;

    let currentAngle = startAngle;
    let currentStep = step;
    let timer = setInterval(() => {
      currentAngle += currentStep;
      if (currentAngle > endAngle) {
        clearInterval(timer);
        this.setData({
          lotteryIndex: index,
          lotteryResult: data[index].name,
          lotteryRunning: false,
        });
        wx.showModal({
          title: '抽奖结果',
          content: data[index].name,
          showCancel: false,
        });
      } else {
        currentStep += step;
        this.drawLottery();
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.setFillStyle("#f5f5f5");
        ctx.arc(centerX, centerY, radius, startAngle * Math.PI / 180, currentAngle * Math.PI / 180);
        ctx.closePath();
        ctx.fill();
        ctx.draw(true);
      }
    }, 20);
  },
})

3. 在 `index.wxss` 文件中添加以下代码：

button {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

这样就可以在微信小程序中实现一个简单的轮盘抽奖功能。