uniapp 小程序转盘抽奖代码示例

<template>
  <view>
    <canvas canvas-id='myCanvas' style='width: 200px; height: 200px;'></canvas>
    <button type='primary' bindtap='rotateWheel'>开始抽奖</button>
  </view>
</template>
<script>
import { createCanvasContext } from '@dcloudio/uni-app';

export default {
  data: {
    ctx: null,
    awards: [
      { name: '奖品1', color: '#FFA07A' },
      { name: '奖品2', color: '#87CEEB' },
      { name: '奖品3', color: '#FFA500' },
      { name: '奖品4', color: '#00FF7F' },
      { name: '奖品5', color: '#FFC0CB' },
      { name: '奖品6', color: '#ADD8E6' },
      { name: '奖品7', color: '#FF69B4' },
      { name: '奖品8', color: '#00BFFF' }
    ]
  },
  onLoad: function () {
    const ctx = createCanvasContext('myCanvas', this);
    this.setData({
      ctx: ctx
    });
    this.drawWheel(ctx, this.data.awards);
  },
  drawWheel: function (ctx, awards) {
    const width = 200; // 转盘宽度
    const height = 200; // 转盘高度
    const radius = Math.min(width, height) / 2 - 10; // 半径
    const centerX = width / 2; // 中心点横坐标
    const centerY = height / 2; // 中心点纵坐标
    const startAngle = -Math.PI / 2; // 起始角度
    const endAngle = Math.PI * 3 / 2; // 结束角度
    const angle = Math.PI * 2 / awards.length; // 每个奖品所占的角度

    // 绘制转盘
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
    ctx.setFillStyle('#FFDAB9');
    ctx.fill();
    ctx.closePath();

    // 绘制每个奖品
    for (let i = 0; i < awards.length; i++) {
      ctx.beginPath();
      ctx.moveTo(centerX, centerY);
      ctx.arc(centerX, centerY, radius, startAngle + i * angle, startAngle + (i + 1) * angle);
      ctx.setFillStyle(awards[i].color);
      ctx.fill();
      ctx.closePath();

      // 绘制奖品名称
      ctx.save();
      ctx.translate(centerX, centerY);
      ctx.rotate(startAngle + i * angle + angle / 2);
      ctx.setFillStyle('#FFF');
      ctx.setFontSize(16);
      ctx.fillText(awards[i].name, radius / 2, 0);
      ctx.restore();
    }

    // 绘制指针
    ctx.beginPath();
    ctx.moveTo(centerX, centerY - radius - 10);
    ctx.lineTo(centerX - 10, centerY - radius - 20);
    ctx.lineTo(centerX + 10, centerY - radius - 20);
    ctx.setFillStyle('#FF0000');
    ctx.fill();
    ctx.closePath();
  },
  rotateWheel: function () {
    const that = this;
    const ctx = that.data.ctx;
    const awards = that.data.awards;
    const angle = Math.PI * 2 / awards.length; // 每个奖品所占的角度
    let randomIndex = Math.floor(Math.random() * awards.length); // 随机抽取奖品
    let rotateAngle = randomIndex * angle + angle / 2; // 转动角度
    let duration = 4000; // 动画时长

    // 动画效果
    let animation = wx.createAnimation({
      duration: duration,
      timingFunction: 'ease'
    });
    animation.rotate(720 + rotateAngle).step();
    that.setData({
      animationData: animation.export()
    });

    // 延时执行抽奖提示
    setTimeout(function () {
      wx.showModal({
        title: '恭喜您',
        content: '获得' + awards[randomIndex].name,
        showCancel: false,
        success: function (res) {
          that.drawWheel(ctx, awards); // 重新绘制转盘
        }
      });
    }, duration);
  }
};
</script>
<style scoped>
</style>