当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5抽奖转盘制作步骤详解

HTML5抽奖转盘制作步骤详解

2025-11-07 13:52:49 0浏览收藏

1. 页面结构与Canvas准备

先在HTML中创建一个元素作为转盘的绘制区域：

设置canvas大小，建议固定宽高避免缩放变形。通过JavaScript获取上下文进行绘图：

const canvas = document.getElementById('wheelCanvas');
const ctx = canvas.getContext('2d');

2. 绘制转盘内容

使用Canvas API绘制扇形区域，每个奖品占一个扇区。基本步骤包括：

定义奖品列表（文字、颜色）
计算每个扇区的角度（360° / 奖品数量）
循环绘制扇形并填充颜色
在扇形中间或弧线上写入奖品文字

示例代码片段：

const prizes = ['一等奖', '二等奖', '谢谢参与', '三等奖', '再来一次', '纪念奖'];
const colors = ['#FFD700', '#C0C0C0', '#FF6B6B', '#CD853F', '#AED6F1', '#FFB6C1'];
function drawWheel() {
const anglePer = 2  Math.PI / prizes.length;
for (let i = 0; i < prizes.length; i++) {
const startAngle = i  anglePer;
const endAngle = startAngle + anglePer;
// 绘制扇形
ctx.beginPath();
ctx.arc(200, 200, 180, startAngle, endAngle);
ctx.lineTo(200, 200);
ctx.fillStyle = colors[i];
ctx.fill();

// 添加文字
ctx.save();
ctx.translate(200, 200);
ctx.rotate(startAngle + anglePer / 2);
ctx.textAlign = 'right';
ctx.fillStyle = '#000';
ctx.font = '16px Microsoft YaHei';
ctx.fillText(prizes[i], 150, 7);
ctx.restore();
}
}

3. 实现转动动画与随机结果

通过requestAnimationFrame实现平滑旋转动画，并控制最终停下的位置：

设定目标角度（根据随机索引计算）
使用缓动函数让转盘先加速后减速
动画结束后弹出中奖结果

关键逻辑：

let currentAngle = 0;
let targetAngle = 0;
let spinning = false;
document.getElementById('startBtn').addEventListener('click', () => {
if (spinning) return;
const randomIndex = Math.floor(Math.random()  prizes.length);
targetAngle = 9  Math.PI + (randomIndex  (2  Math.PI / prizes.length)); // 多圈后停在指定位置
spinning = true;
requestAnimationFrame(spin);
});
function spin() {
const easeOut = (t) => 1 - Math.pow(1 - t, 3); // 缓动函数
const progress = 1 - (targetAngle - currentAngle) / (9 * Math.PI);
if (progress < 1) {
currentAngle += (targetAngle - currentAngle)  easeOut(progress > 0.7 ? 0.1 : 0.2);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(200, 200);
ctx.rotate(-currentAngle);
ctx.translate(-200, -200);
drawWheel();
ctx.restore();
requestAnimationFrame(spin);
} else {
spinning = false;
alert(`恭喜你抽中：${prizes[Math.round((currentAngle % (2  Math.PI)) / (2 * Math.PI / prizes.length)) % prizes.length]}`);
}
}