如何實(shí)現(xiàn)js+canvas的轉(zhuǎn)盤效果

發(fā)布時(shí)間：2021-06-26 11:01:20 來源：億速云閱讀：192 作者：小新欄目：編程語言

這篇文章主要為大家展示了“如何實(shí)現(xiàn)js+canvas的轉(zhuǎn)盤效果”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何實(shí)現(xiàn)js+canvas的轉(zhuǎn)盤效果”這篇文章吧。

用到了canvas的繪制，旋轉(zhuǎn)，重繪操作，定時(shí)器，文本，平移，線條，圓，清理畫布等等；

版本一

不可以點(diǎn)擊，刷新旋轉(zhuǎn)

<!DOCTYPE html>

<html>



 <head>

 <meta charset="UTF-8">

 <title>轉(zhuǎn)盤抽獎(jiǎng)</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);

 // 圓心坐標(biāo)

 var oX = 0;

 var oY = 0;

 // 大圓半徑

 var oR = 150;

 // 小圓半徑

 var oR1 = 50;

 // 弧度

 var oH = Math.PI / 180;

 // 定時(shí)器

 var timer;

 // 角度

 var angle = 0;

 // 文本

 var textArr = ["JavaScript", "jQuery", "Vue", "ajax", "rect", "angular", "HTML", "css"];

 // 顏色

 var colorArr = [];

 // 隨機(jī)生成顏色

 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();

 

  // 保存環(huán)境,旋轉(zhuǎn)畫布

  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();

  // 環(huán)境釋放與環(huán)境保存成對

  }

 }, 50);

 </script>



</html>

版本二

加了點(diǎn)擊事件

<!DOCTYPE html>

<html>



 <head>

 <meta charset="UTF-8">

 <title>轉(zhuǎn)盤抽獎(jiǎng)</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);

 // 圓心坐標(biāo)

 var oX = 0;

 var oY = 0;

 // 大圓半徑

 var oR = 150;

 // 小圓半徑

 var oR1 = 50;

 // 弧度

 var oH = Math.PI / 180;

 // 定時(shí)器

 var timer;

 // 角度

 var angle = 0;

 // 文本

 var textArr = ["JavaScript", "jQuery", "Vue", "ajax", "rect", "angular", "HTML", "css"];

 // 顏色

 var colorArr = [];

 // 隨機(jī)生成顏色

 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();

  // 保存環(huán)境,旋轉(zhuǎn)畫布

  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();

  // 環(huán)境釋放與環(huán)境保存成對

 }

 </script>



</html>

以上是“如何實(shí)現(xiàn)js+canvas的轉(zhuǎn)盤效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

如何實(shí)現(xiàn)js+canvas的轉(zhuǎn)盤效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽