js+canvas for Turntable Effect (two versions)
- 2021-08-16 23:12:51
- OfStack
In this paper, we share the specific code of js + canvas to realize the turntable effect for your reference. The specific contents are as follows
Used canvas to draw, rotate, redraw operations, timer, text, translation, lines, circles, clean canvas and so on;
Version 1
You can't click, refresh and rotate
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Turntable lottery </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");
// Translate a canvas
cxt.translate(250, 250);
// Center coordinates
var oX = 0;
var oY = 0;
// Great circle radius
var oR = 150;
// Small circle radius
var oR1 = 50;
// Radian
var oH = Math.PI / 180;
// Timer
var timer;
// Angle
var angle = 0;
// Text
var textArr = ["JavaScript", "jQuery", "Vue", "ajax", "rect", "angular", "HTML", "css"];
// Color
var colorArr = [];
// Randomly generate colors
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);
}
// Initial velocity
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 {
// Redraw
// Clear canvas
cxt.clearRect(-250, -250, 500, 500);
// Processing angle
if (angle >= 360) {
angle = 0;
}
// Processing speed
seep *= 0.95; // Reduce speed
angle += seep;
// Draw short lines
cxt.beginPath();
cxt.strokeStyle = "red";
cxt.lineWidth = 2;
cxt.moveTo(150, 0);
cxt.lineTo(180, 0);
cxt.stroke();
// Preservation environment , Rotate canvas
cxt.strokeStyle = "chartreuse";
cxt.save();
cxt.rotate(angle * oH);
// Draw a fan
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();
}
// Draw a central circle
cxt.fillStyle = "#FFF";
cxt.beginPath();
cxt.arc(oX, oY, oR1, 0, 2 * Math.PI);
cxt.fill();
// Add text
for (var i = 0; i < textArr.length; i++) {
cxt.save();
cxt.rotate((i * 45 + 25) * oH);
cxt.fillStyle = "#fff";
cxt.font = "16px Microsoft Yahei ";
cxt.fillText(textArr[i], 70, 0);
cxt.restore();
}
cxt.restore();
// Environmental release and environmental preservation are paired
}
}, 50);
</script>
</html>
Version 2
Added click event
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Turntable lottery </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");
// Translate a canvas
cxt.translate(250, 250);
// Center coordinates
var oX = 0;
var oY = 0;
// Great circle radius
var oR = 150;
// Small circle radius
var oR1 = 50;
// Radian
var oH = Math.PI / 180;
// Timer
var timer;
// Angle
var angle = 0;
// Text
var textArr = ["JavaScript", "jQuery", "Vue", "ajax", "rect", "angular", "HTML", "css"];
// Color
var colorArr = [];
// Randomly generate colors
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);
}
// Initial velocity
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() {
// Redraw
// Clear canvas
cxt.clearRect(-250, -250, 500, 500);
// Processing angle
if (angle >= 360) {
angle = 0;
}
// Processing speed
seep *= 0.95; // Reduce speed
angle += seep;
// Draw short lines
cxt.beginPath();
cxt.strokeStyle = "red";
cxt.lineWidth = 2;
cxt.moveTo(150, 0);
cxt.lineTo(180, 0);
cxt.stroke();
// Preservation environment , Rotate canvas
cxt.strokeStyle = "chartreuse";
cxt.save();
cxt.rotate(angle * oH);
// Draw a fan
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();
}
// Draw a central circle
cxt.fillStyle = "#FFF";
cxt.beginPath();
cxt.arc(oX, oY, oR1, 0, 2 * Math.PI);
cxt.fill();
// Add text
for (var i = 0; i < textArr.length; i++) {
cxt.save();
cxt.rotate((i * 45 + 25) * oH);
cxt.fillStyle = "#fff";
cxt.font = "16px Microsoft Yahei ";
cxt.fillText(textArr[i], 70, 0);
cxt.restore();
}
cxt.restore();
// Environmental release and environmental preservation are paired
}
</script>
</html>