答案：通过HTML5 Canvas绘制转盘并用JavaScript控制旋转动画与抽奖逻辑。首先创建canvas元素并获取上下文，定义奖项和颜色数组；利用Canvas API循环绘制扇形区域并添加文字标签；使用requestAnimationFrame实现平滑旋转动画，结合缓动函数使转动逐渐减速；通过随机生成中奖索引计算目标角度，完成指定圈数后停止并提示获奖结果；页面加载时初始化绘制转盘。整个过程涉及坐标变换、角度单位转换及动画控制，可进一步优化样式或增加音效提升交互体验。
实现一个简单的抽奖转盘，核心是结合HTML5的Canvas绘制转盘，并用JavaScript控制旋转动画和停止逻辑。整个过程包括绘制扇形区域、添加文字标签、实现指针转动动画以及随机决定中奖结果。
1. 页面结构与Canvas准备
在HTML中创建一个canvas元素，作为转盘的绘制区域。设置固定宽高，方便后续绘图。
通过JavaScript获取canvas上下文，定义基本参数如奖项列表、颜色、当前角度等。
2. 绘制转盘
使用Canvas API绘制多个扇形，每个扇形代表一个奖项。通过循环计算每个区域的角度和颜色。
立即学习“Java免费学习笔记（深入）”；
const canvas = document.getElementById("wheel");
const ctx = canvas.getContext("2d");
const prizes = ["一等奖", "二等奖", "谢谢参与", "三等奖", "再来一次", "纪念奖"];
const colors = ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF", "#FF9F40"];
function drawWheel() {
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 180;
const anglePer = (Math.PI * 2) / prizes.length;
prizes.forEach((prize, i) => {
const startAngle = i anglePer;
const endAngle = (i + 1) anglePer;
// 绘制扇形
ctx.beginPath();
ctx.fillStyle = colors[i];
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.closePath();
ctx.fill();
// 添加文字
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(startAngle + anglePer / 2);
ctx.textAlign = "right";
ctx.fillStyle = "#fff";
ctx.font = "16px Microsoft Yahei";
ctx.fillText(prize, radius - 20, 7);
ctx.restore();
});
原生js实现喜庆背景带炫酷雪花飘落动画特效代码
原生js实现新年倒计时喜庆背景带炫酷雪花飘落动画特效代码下载。基于原生JavaScript+CSS实现，不依靠任何第三方jQuery库，兼容手机移动端，新年倒计时自动获取，可循环使用，非常简单实用的一款新年倒计时js特效代码。
下载
// 绘制中心圆点
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.arc(centerX, centerY, 10, 0, Math.PI * 2);
ctx.fill();
}
3. 实现旋转动画
使用requestAnimationFrame实现平滑转动。设置总圈数和目标角度，逐步减缓速度直到停止。
let currentAngle = 0;
let isSpinning = false;
let spinAnimation = null;
function startSpin() {
if (isSpinning) return;
isSpinning = true;
// 随机选中奖项（索引0-5）
const winnerIndex = Math.floor(Math.random() prizes.length);
const targetAngle = 360 5 + (360 - (winnerIndex * 360) / prizes.length);
let startTimestamp = null;
const totalDuration = 5000; // 转动5秒
function animate(timestamp) {
if (!startTimestamp) startTimestamp = timestamp;
const progress = timestamp - startTimestamp;
const easeOut = 1 - Math.pow(1 - progress / totalDuration, 3); // 缓动函数
currentAngle = (easeOut * targetAngle) % 360;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate((-currentAngle * Math.PI) / 180);
ctx.translate(-canvas.width / 2, -canvas.height / 2);
drawWheel();
if (progress < totalDuration) {
spinAnimation = requestAnimationFrame(animate);
} else {
isSpinning = false;
alert(`恭喜你获得：${prizes[winnerIndex]}`);
}}
spinAnimation = requestAnimationFrame(animate);
}
4. 初始化页面
页面加载完成后先绘制一次转盘。
window.onload = function () {
drawWheel();
};
基本上就这些。通过Canvas绘制图形，JavaScript控制旋转动画和结束逻辑，就能实现一个视觉流畅的抽奖转盘。可以进一步加入音效、优化样式或增加指针标识来提升体验。不复杂但容易忽略细节，比如坐标变换顺序和角度单位转换。
