本文实例为大家分享了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 = document.getelementbyid("mycanvas");
var cxt = mycanvas.getcontext("2d");
// 平移画布
cxt.translate(250, 250);
// 圆心坐标
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.textalign = "center";
cxt.textbaseline = "middle"
cxt.fillstyle = "black";
var txt = textarr[textarr.length - index-1];
// console.log(cxt.measuretext(txt).width);
cxt.filltext(txt, 0, 0);
} else {
//重绘
// 清除画布
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.moveto(150, 0);
cxt.lineto(180, 0);
cxt.stroke();
// 保存环境,旋转画布
cxt.strokestyle = "chartreuse";
cxt.save();
cxt.rotate(angle * oh);
// 画扇形
for (var i = 0; i < 8; i++) {
cxt.fillstyle = colorarr[i];
cxt.beginpath();
cxt.moveto(0, 0);
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.rotate((i * 45 + 25) * oh);
cxt.fillstyle = "#fff";
cxt.font = "16px 微软雅黑";
cxt.filltext(textarr[i], 70, 0);
cxt.restore();
}
cxt.restore();
// 环境释放与环境保存成对
}
}, 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 = document.getelementbyid("mycanvas");
var cxt = mycanvas.getcontext("2d");
// 平移画布
cxt.translate(250, 250);
// 圆心坐标
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();
mycanvas.onclick = function(event) {
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.textalign = "center";
cxt.textbaseline = "middle"
cxt.fillstyle = "black";
var txt = textarr[textarr.length - index - 1];
cxt.filltext(txt, 0, 0);
} else {
drawline();
}
}, 50);
}
} else {
alert("no")
}
}
function drawline() {
//重绘
// 清除画布
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.moveto(150, 0);
cxt.lineto(180, 0);
cxt.stroke();
// 保存环境,旋转画布
cxt.strokestyle = "chartreuse";
cxt.save();
cxt.rotate(angle * oh);
// 画扇形
for (var i = 0; i < 8; i++) {
cxt.fillstyle = colorarr[i];
cxt.beginpath();
cxt.moveto(0, 0);
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.rotate((i * 45 + 25) * oh);
cxt.fillstyle = "#fff";
cxt.font = "16px 微软雅黑";
cxt.filltext(textarr[i], 70, 0);
cxt.restore();
}
cxt.restore();
// 环境释放与环境保存成对
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
