这篇文章主要为大家详细介绍了两个版本的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 = 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

下载声明：
  • 本站资源如无特殊说明默认解压密码为www.ymkuzhan.com建议使用WinRAR解压；
  • 本站资源来源于用户分享、互换、购买以及网络收集等渠道，本站不提供任何技术服务及有偿服务，资源仅提供给大家学习研究请勿作它用。
  • 赞助本站仅为维持服务器日常运行并非购买程序及源码费用因此不提供任何技术支持，如果你喜欢该程序，请购买正版!
    • 版权声明：
  • 下载本站资源学习研究的默认同意本站【版权声明】若本站提供的资源侵犯到你的权益，请提交版权证明文件至邮箱ymkuzhan#126.com(将#替换为@)站长将会在三个工作日内为您删除。
    • 免责声明：
  • 您好，本站所有资源(包括但不限于：源码、素材、工具、字体、图像、模板等)均为用户分享、互换、购买以及网络收集而来，并未取得原始权利人授权，因此禁止一切商用行为，仅可用于个人研究学习使用。请务必于下载后24小时内彻底删除，一切因下载人使用所引起的法律相关责任，包括但不限于:侵权,索赔,法律责任,刑事责任等相关责任,全部由下载人/使用人,全部承担。以上说明,一经发布视为您已全部阅读，理解、同意以上内容，如对以上内容持有异议，请勿下载，谢谢配合！支持正版，人人有责，如不慎对您的合法权益构成侵犯，请联系我们对相应内容进行删除，谢谢！