溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“如何實現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( www.588cctv.com );
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>以上是“如何實現js+canvas的轉盤效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
