如何实现js+canvas的转盘效果

发布时间：2021-06-26 11:01:20 作者：小新
来源：亿速云阅读：198

这篇文章主要为大家展示了“如何实现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的转盘效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！

如何实现js+canvas的转盘效果

相关阅读