当前位置：首页 > HTML

h5抽奖实现

2026-03-06 13:38:19HTML

H5抽奖实现方法

H5抽奖功能可以通过多种技术实现，以下是常见的几种方法：

使用Canvas绘制转盘

通过Canvas绘制转盘界面，结合JavaScript实现动画效果：

h5抽奖实现

const canvas = document.getElementById('lottery');
const ctx = canvas.getContext('2d');
const prizes = ['奖品1', '奖品2', '奖品3', '谢谢参与'];
const colors = ['#FF5252', '#FF4081', '#E040FB', '#7C4DFF'];

function drawWheel() {
  const arc = Math.PI / (prizes.length / 2);
  for (let i = 0; i < prizes.length; i++) {
    ctx.beginPath();
    ctx.fillStyle = colors[i];
    ctx.moveTo(150, 150);
    ctx.arc(150, 150, 150, i * arc, (i + 1) * arc, false);
    ctx.fill();
  }
}

function startLottery() {
  // 抽奖逻辑
}

使用CSS3动画实现

通过CSS3的transform和transition属性创建平滑的动画效果：

.lottery-wheel {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: relative;
  transition: transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}

.prize-item {
  position: absolute;
  width: 50%;
  height: 50%;
  transform-origin: 100% 100%;
}

结合后端API

前端调用后端接口获取抽奖结果：

h5抽奖实现

async function drawPrize() {
  try {
    const response = await fetch('/api/lottery', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      }
    });
    const result = await response.json();
    showResult(result);
  } catch (error) {
    console.error('抽奖失败:', error);
  }
}

概率控制实现

在前端实现简单的概率控制：

function getRandomPrize() {
  const prizes = [
    { name: '一等奖', prob: 0.01 },
    { name: '二等奖', prob: 0.05 },
    { name: '三等奖', prob: 0.1 },
    { name: '谢谢参与', prob: 0.84 }
  ];

  let random = Math.random();
  let sum = 0;

  for (let prize of prizes) {
    sum += prize.prob;
    if (random <= sum) {
      return prize;
    }
  }
}

移动端优化技巧

针对移动端触摸事件进行优化：

const wheel = document.getElementById('wheel');
let startAngle = 0;

wheel.addEventListener('touchstart', (e) => {
  startAngle = getAngle(e.touches[0]);
});

wheel.addEventListener('touchmove', (e) => {
  const currentAngle = getAngle(e.touches[0]);
  const diff = currentAngle - startAngle;
  wheel.style.transform = `rotate(${diff}deg)`;
});

function getAngle(touch) {
  const rect = wheel.getBoundingClientRect();
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;
  return Math.atan2(touch.clientY - centerY, touch.clientX - centerX) * 180 / Math.PI;
}