js+canvas实现转盘效果（两个版本）本⽂实例为⼤家分享了js+canvas实现转盘效果的具体代码，供⼤家参考，具体内容如下
⽤到了canvas的绘制，旋转，重绘操作，定时器，⽂本，平移，线条，圆，清理画布等等；
版本⼀
不可以点击，刷新旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>转盘抽奖</title>
<style type="text/css">
#myCanvas {
background: #FAEBD7;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
var myCanvas = ElementById("myCanvas");
var cxt = Context("2d");
// 平移画布
// 圆⼼坐标
var oX = 0;
var oY = 0;
// ⼤圆半径
var oR = 150;
// ⼩圆半径
var oR1 = 50;
// 弧度
var oH = Math.PI / 180;
// 定时器
var timer;
// ⾓度
var angle = 0;
// ⽂本
var textArr = ["JavaScript", "jQuery", "Vue", "ajax", "rect", "angular", "HTML", "css"];
// 颜⾊
var colorArr = [];
// 随机⽣成颜⾊
for (var i = 0; i < textArr.length; i++) {
var c = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")"  colorArr.push(c);
}
//起始速度
var seep = Math.random() * 100 + 100;
timer = setInterval(function() {
if (seep < 0.3) {
clearInterval(timer);
var index = Math.floor(angle / 45);
console.log(index);
cxt.font = "12px Arial";
cxt.fillStyle = "black";
var txt = textArr[textArr.length - index-1];
//  console.asureText(txt).width);
cxt.fillText(txt, 0, 0);
} else {
//重绘
// 清除画布
cxt.clearRect(-250, -250, 500, 500);
// 处理⾓度
if (angle >= 360) {
}
// 处理速度
seep *= 0.95; // 减⼩速度
angle += seep;
// 画短线
cxt.beginPath();
cxt.strokeStyle = "red";
cxt.lineWidth = 2;
cxt.lineTo(180, 0);
cxt.stroke();
// 保存环境，旋转画布
cxt.strokeStyle = "chartreuse";
cxt.save();
// 画扇形
for (var i = 0; i < 8; i++) {
cxt.fillStyle = colorArr[i];
cxt.beginPath();
cxt.arc(0, 0, 150, i * 45 * oH, (i + 1) * 45 * oH);
cxt.closePath();
cxt.fill();
cxt.stroke();
}
// 画中⼼圆
cxt.fillStyle = "#FFF";
cxt.beginPath();
cxt.arc(oX, oY, oR1, 0, 2 * Math.PI);
cxt.fill();
// 添加⽂字
for (var i = 0; i < textArr.length; i++) {
cxt.save();
cxt.fillStyle = "#fff";
cxt.font = "16px 微软雅⿊";
cxt.fillText(textArr[i], 70, 0);
}
// 环境释放与环境保存成对
}
}, 50);
</script>
</html>
版本⼆
加了点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>转盘抽奖</title>
<style type="text/css">
#myCanvas {
background: #FAEBD7;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas> </body>
<script type="text/javascript">
var myCanvas = ElementById("myCanvas");
var cxt = Context("2d");
var oX = 0;
var oY = 0;
// ⼤圆半径
var oR = 150;
// ⼩圆半径
var oR1 = 50;
// 弧度
var oH = Math.PI / 180;
// 定时器
var timer;
// ⾓度
var angle = 0;
// ⽂本
var textArr = ["JavaScript", "jQuery", "Vue", "ajax", "rect", "angular", "HTML", "css"];
// 颜⾊
var colorArr = [];
/
/ 随机⽣成颜⾊
for (var i = 0; i < textArr.length; i++) {
var c = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")"  colorArr.push(c);
}
//起始速度
var seep = Math.random() * 100 + 100;
drawLine();
var mX = event.clientX - myCanvas.offsetLeft;
var mY = event.clientX - myCanvas.offsetTop;
if (cxt.isPointInPath(mX, mY)) {
var j = 50;
var times = null;
if (times == null) {
times = setInterval(function() {
if (seep < 0.3) {
clearInterval(timer);
var index = Math.floor(angle / 45);
console.log(index);
cxt.font = "12px Arial";
cxt.fillStyle = "black";
var txt = textArr[textArr.length - index - 1];
cxt.fillText(txt, 0, 0);
} else {
drawLine();
}
}, 50);
}
} else {
alert("no")
}
}
function drawLine() {
javascript动态效果//重绘
// 清除画布
cxt.clearRect(-250, -250, 500, 500);
// 处理⾓度
if (angle >= 360) {
angle = 0;
}
// 处理速度
seep *= 0.95; // 减⼩速度
angle += seep;
// 画短线
cxt.beginPath();
cxt.strokeStyle = "red";
cxt.lineWidth = 2;
cxt.lineTo(180, 0);
cxt.stroke();
// 保存环境，旋转画布
cxt.strokeStyle = "chartreuse";
for (var i = 0; i < 8; i++) {
cxt.fillStyle = colorArr[i];
cxt.beginPath();
cxt.arc(0, 0, 150, i * 45 * oH, (i + 1) * 45 * oH);
cxt.closePath();
cxt.fill();
cxt.stroke();
}
// 画中⼼圆
cxt.fillStyle = "#FFF";
cxt.beginPath();
cxt.arc(oX, oY, oR1, 0, 2 * Math.PI);
cxt.fill();
// 添加⽂字
for (var i = 0; i < textArr.length; i++) {
cxt.save();
cxt.fillStyle = "#fff";
cxt.font = "16px 微软雅⿊";
cxt.fillText(textArr[i], 70, 0);
}
// 环境释放与环境保存成对
}
</script>
</html>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。