js+canvas实现转盘效果(两个版本)


Posted in Javascript onSeptember 13, 2020

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 #Javascript
原生JS实现九宫格抽奖
Sep 13 #Javascript
jQuery实现带进度条的轮播图
Sep 13 #jQuery
js+canvas实现画板功能
Sep 13 #Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 #jQuery
jQuery实现简单全选框
Sep 13 #jQuery
jQuery+ajax实现用户登录验证
Sep 13 #jQuery
You might like
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
jQuery版仿Path菜单效果
2011/12/15 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
js的三种继承方式详解
2017/01/21 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
简述vue中的config配置
2018/01/23 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
python使用turtle库与random库绘制雪花
2018/06/22 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Python3几个常见问题的处理方法
2019/02/26 Python
python实现的config文件读写功能示例
2019/09/24 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
自动化系在校本科生求职信
2013/10/23 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
《白鹅》教学反思
2014/04/13 职场文书
班主任寄语2016
2015/12/04 职场文书
Python竟然能剪辑视频
2021/05/25 Python
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
golang操作rocketmq的示例代码
2022/04/06 Golang
MySQL分布式恢复进阶
2022/07/23 MySQL
SpringBoot Http远程调用的方法
2022/08/14 Java/Android