使用js+canvas实现转盘效果

发布时间:2020-11-03 19:11:13 作者:Leah
来源:亿速云 阅读:178

今天就跟大家聊聊有关使用js+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();
  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实现转盘效果有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

推荐阅读:
  1. 利用JavaScript怎么实现一个抽奖转盘效果
  2. 使用python怎么实现一个转盘效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js canvas

上一篇:asp如何实现限制域名访问

下一篇:使用vue+axios 拦截器实现统一token的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》