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>

Related articles: