本文介绍如何使用JavaScript结合Canvas API绘制一个可交互的抽奖转盘。通过获取2D上下文，利用数学计算控制扇形绘制与指针逻辑，实现点击按钮后转盘旋转及停止时显示中奖结果的动画效果。
JS与Canvas实现抽奖转盘动画
本文分享了一段利用JavaScript和Canvas技术实现抽奖转盘功能的完整代码，供开发者参考学习。
示例展示了一个基于Canvas绘制的转盘抽奖程序。当用户点击开关按钮触发转动时，转盘开始旋转动画；当转盘停止转动时，指针所指向的区域即为中奖结果，该结果会显示在转盘中心位置。具体视觉效果如图所示：
实现上述动画效果的核心代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
background: #eee;
}
</style>
<title>Canvas绘制抽奖转盘</title>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var cobj = canvas.getContext("2d");
var btn = document.getElementById("btn");
var num = Math.PI / 180;
cobj.translate(250, 250);
var colorArr = ["#24a274", "#2a70a6", "#6d56c3", "#b23880", "#7a9a36", "#b48548", "#397839", "#89489c"];
var textArr = ["js", "html", "css", "php", "mysql", "node", "flutter", "java"];
var angle = 0;
btn.onclick = function () {
location.reload();
};
var step = 10 + 10 * Math.random();
var t = setInterval(function () {
if (step <= 0.3) {
clearInterval(t);
var num1 = Math.ceil(angle / 45);
var con = textArr[textArr.length - num1];
cobj.font = "18px sans-serif";
cobj.textAlign = "center";
cobj.fillText(con, 0, 0);
} else {
if (angle >= 360) {
angle = 0;
}
step *= 0.95;
angle += step;
cobj.clearRect(-200, -200, 500, 500);
cobj.beginPath();
cobj.lineWidth = 5;
cobj.moveTo(135, 0);
cobj.lineTo(150, 0);
cobj.stroke();
cobj.lineWidth = 2;
cobj.save();
cobj.rotate(angle * num);
for (var i = 1; i <= 8; i++) {
cobj.beginPath();
cobj.moveTo(0, 0);
cobj.fillStyle = colorArr[i - 1];
cobj.arc(0, 0, 130, (i - 1) * 45 * num, i * 45 * num);
cobj.closePath();
cobj.stroke();
cobj.fill();
}
cobj.beginPath();
cobj.fillStyle = "#fff";
cobj.arc(0, 0, 60, 0, 2 * Math.PI);
cobj.fill();
for (var i = 0; i < 8; i++) {
cobj.save();
cobj.beginPath();
cobj.rotate((i * 45 + 20) * num);
cobj.fillStyle = "#222";
cobj.font = "18px sans-serif";
cobj.fillText(textArr[i], 75, 0);
cobj.restore();
}
cobj.restore();
}
}, 60)
}
</script>
</head>
<body>
<canvas id="canvas" width=500 height=500></canvas>
<input type="button" value="开始" id="btn" />
</body>
</html>以上内容即为本文分享的全部代码与说明，希望能为读者的学习提供有益帮助，同时也欢迎大家继续支持本站获取更多技术资源。