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 相关文章推荐
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
深入理解js generator数据类型
Aug 16 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
js常见遍历操作小结
Jun 06 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
JS highcharts动态柱状图原理及实现
Oct 16 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
基于mysql的bbs设计(二)
2006/10/09 PHP
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
JavaScript知识点整理
2015/12/09 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
Python 实现向word(docx)中输出
2020/02/13 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
简历中个人求职的自我评价模板
2013/11/29 职场文书
企业申诉管理制度
2014/01/30 职场文书
房产委托公证书
2014/04/08 职场文书
党员一帮一活动总结
2014/07/08 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
信访工作汇报材料
2014/10/27 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
python文件目录操作之os模块
2021/05/08 Python
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis