js+canvas实现转盘效果（两个版本）

程序员文章站 2022-06-22 14:41:14

本文实例为大家分享了js+canvas实现转盘效果的具体代码，供大家参考，具体内容如下用到了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();
  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实现简单的抽奖转盘效果示例

python实现转盘效果 python实现轮盘抽奖游戏

两个surfaceView实现切换效果

python实现大转盘抽奖效果

js+canvas实现动态吃豆人效果

js+canvas实现动态吃豆人效果

jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果

6步轻松实现两个listView联动效果

iOS实现新年抽奖转盘效果的思路

【JS常用效果】jquery实现dl dt dd菜单展开收起效果(1.4以下版本)