js+canvas實現(xiàn)轉(zhuǎn)盤效果（兩個版本）

更新時間：2020年09月13日 15:35:05 作者：暗鎖讀客

這篇文章主要為大家詳細介紹了兩個版本的js+canvas實現(xiàn)轉(zhuǎn)盤效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js+canvas實現(xiàn)轉(zhuǎn)盤效果的具體代碼，供大家參考，具體內(nèi)容如下

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

版本一

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

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title>轉(zhuǎn)盤抽獎</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();
  
  // 保存環(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>

版本二

加了點擊事件

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title>轉(zhuǎn)盤抽獎</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();
  // 保存環(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)境保存成對
 }
 </script>

</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: