首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

用jQuery旋转插件jqueryrotate制作转盘抽奖

Posted in Javascript onFebruary 10, 2017

本文实例为大家分享了jQuery旋转插件jqueryrotate制作转盘抽奖的具体代码，供大家参考，具体内容如下

用jQuery旋转插件jqueryrotate制作转盘抽奖

原文链接：js HTML5 Canvas绘制转盘抽奖

下载地址：jqueryrotate

<!DOCTYPE html>
<html>

 <head lang="en">
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <title>抽奖转盘</title>
 <link rel="stylesheet" href="css/index.css" rel="external nofollow" >
 <script src="js/jquery-2.1.4.js"></script>
 <script src="js/jQueryRotate.js"></script>
 <script src="js/index.js"></script>
 </head>

 <body>
 <div class="content">
  <div class="wheel">
  <canvas class="item" id="wheelCanvas" width="422px" height="422px"></canvas>
  <img class="pointer" src="images/wheel-pointer.png" />
  </div>
 </div>
 <div class="tips">
  <span id="tip">jason</span>
 </div>
 </body>

</html>
/*初始化样式*/

body,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
table,
td,
img,
div {
 margin: 0;
 padding: 0;
 border: 0;
}

ul,
ol {
 list-style-type: none;
}

select,
input,
img,
select {
 vertical-align: middle;
}

a {
 text-decoration: none;
 color: #000;
}

a:hover {
 color: #c00;
 text-decoration: none;
}

.clear {
 clear: both;
}

input {
 font-size: 12px;
}

body {
 color: #333;
 font-size: 12px;
 font-family: "Microsoft YaHei";
 background: #e62d2d;
 background: greenyellow;
 overflow-x: hidden;
}


/* 大转盘样式 */

.content {
 display: block;
 width: 95%;
 /*居中显示*/
 margin: 30px auto;
}

.content .wheel {
 display: block;
 width: 100%;
 position: relative;
 /*转盘的背景*/
 background-image: url(../images/wheel-bg.png);
 background-size: 100% 100%;
}

.content .wheel canvas.item {
 width: 100%;
}

.content .wheel img.pointer {
 position: absolute;
 width: 31.5%;
 height: 42.5%;
 left: 34.3%;
 top: 23%;
}

.tips {
 text-align: center;
 margin: 20px 0;
 color: red;
 font: normal 24px 'MicroSoft YaHei';
}
// 判断是不是移动设备
var isMobile = {
 Android: function() {
 return navigator.userAgent.match(/Android/i) ? true : false;
 },
 BlackBerry: function() {
 return navigator.userAgent.match(/BlackBerry/i) ? true : false;
 },
 iOS: function() {
 return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
 },
 Windows: function() {
 return navigator.userAgent.match(/IEMobile/i) ? true : false;
 },
 any: function() {
 return(isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
 }
};

var turnWheel = {
 rewardNames: [], //转盘奖品名称数组
 colors: [], //转盘奖品区块对应背景颜色
 outsideRadius: 192, //转盘外圆的半径
 textRadius: 155, //转盘奖品位置距离圆心的距离
 insideRadius: 68, //转盘内圆的半径
 startAngle: 0, //开始角度

 bRotate: false //false:停止;ture:旋转
};

// 图片信息
var imgQb = new Image();
imgQb.src = "~/../images/qb.png";
var imgSorry = new Image();
imgSorry.src = "~/../images/2.png";

$(document).ready(function() {

 // 模拟数据，可以Ajax请求服务器数据，添加大转盘的奖品与奖品区域背景颜色
 /*
 $.ajax({
 type: "POST",
 url: "~/../json/data.json",
 data: null,
 async:false,
 dataType:"json", // 返回数据类型
 success: function(data){
  turnWheel.rewardNames = data["rewardNames"];
  turnWheel.colors = data["colors"];
 },
 error: function(data){
  alert("网络错误，请检查您的网络设置！");
  $("#tip").text("请求数据失败");
 }
 });
 */

 turnWheel.rewardNames = [
 "5000M流量包", "10Q币",
 "谢谢参与", "5Q币",
 "10M流量包", "20M流量包",
 "10M流量包", "20M流量包",
 "20Q币 ", "30M流量包",
 "100M流量包", "2Q币"
 ];
 turnWheel.colors = [
 "#FFF4D7", "#FFFFFF",
 "#F0F4D8", "#FFFFFF",
 "#FFF4D0", "#FFFFFF",
 "#FFF4D0", "#FFFFFF",
 "#FFF4D6", "#FFFFFF",
 "#FFF4D6", "#FFFFFF"
 ];

 //旋转转盘 item:奖品序号，从0开始的; txt：提示语 ,count 奖品的总数量;
 function rotateFunc(item, tip, count) {

 // 应该旋转的角度，旋转插件角度参数是角度制。
 var baseAngle = 360 / count;
 // 旋转角度 == 270°（当前第一个角度和指针位置的偏移量） - 奖品的位置 * 每块所占的角度 - 每块所占的角度的一半(指针指向区域的中间)
 angles = 360 * 3 / 4 - (item * baseAngle) - baseAngle / 2; // 因为第一个奖品是从0°开始的，即水平向右方向
 $('#wheelCanvas').stopRotate();
 // 注意，jqueryrotate 插件传递的角度不是弧度制。
 // 哪个标签调用方法，旋转哪个控件
 $('#wheelCanvas').rotate({
  angle: 0, //初始旋转的角度数，并且立即执行
  animateTo: angles + 360 * 5, // 这里多旋转了5圈，圈数越多，转的越快
  duration: 8000, //指定使用animateTo的动画执行持续时间
  callback: function() { // 回调方法
  $("#tip").text(tip);
  turnWheel.bRotate = !turnWheel.bRotate;
  if(isMobile.any()) // 判断是否移动设备
  {
   // 调OC代码
   window.location.href = "turntable://test.com?" + "index=" + item + "&tip=" + tip;
  }
  }
 });
 };

 // 抽取按钮按钮点击触发事件
 $('.pointer').click(function() {
 // 正在转动，直接返回
 if(turnWheel.bRotate) return;

 turnWheel.bRotate = !turnWheel.bRotate;
 var count = turnWheel.rewardNames.length;

 // 这里应该是从服务器获取用户真实的获奖信息（对应的获奖序号）
 // 简单模拟随机获取奖品的序号(奖品个数范围内)
 var item = randomNum(0, count - 1);
 // 开始抽奖
 rotateFunc(item, turnWheel.rewardNames[item], count);
 });

});

/*
返回在n和m之间的随机整数
n<= random <=m
*/
function randomNum(n, m) {
 /* Math.floor(Math.random()*10);时，可均衡获取0到9的随机整数。 */
 var random = Math.floor(Math.random() * (m - n)) + n;
 console.log("rewardNames["+random+"]");
 return random;

}

//页面所有元素加载完毕后执行drawWheelCanvas()方法对转盘进行渲染
window.onload = function() {
 drawWheelCanvas();
};

/*
 * 渲染转盘
 * */
function drawWheelCanvas() {

 // 获取canvas画板，相当于layer？？
 var canvas = document.getElementById("wheelCanvas");
 // var canvas = ($("#wheelCanvas")).get()[0]; // 注意，jQuery获取的是包装过的对象，不是DOM对象,可以进行转换

 // 计算每块占的角度，弧度制
 var baseAngle = Math.PI * 2 / (turnWheel.rewardNames.length);
 // 获取上下文
 var ctx = canvas.getContext("2d");

 var canvasW = canvas.width; // 画板的高度
 var canvasH = canvas.height; // 画板的宽度
 //在给定矩形内清空一个矩形
 ctx.clearRect(0, 0, canvasW, canvasH);

 //strokeStyle 绘制颜色
 ctx.strokeStyle = "#FFBE04"; // 红色
 //font 画布上文本内容的当前字体属性
 ctx.font = '16px Microsoft YaHei';

 // 注意，开始画的位置是从0°角的位置开始画的。也就是水平向右的方向。
 // 画具体内容
 for(var index = 0; index < turnWheel.rewardNames.length; index++) {
 // 当前的角度
 var angle = turnWheel.startAngle + index * baseAngle;
 // 填充颜色
 ctx.fillStyle = turnWheel.colors[index];

 // 开始画内容
 // ---------基本的背景颜色----------
 ctx.beginPath();
 /*
  * 画圆弧，和IOS的Quartz2D类似
  * context.arc(x,y,r,sAngle,eAngle,counterclockwise);
  * x :圆的中心点x
  * y :圆的中心点x
  * sAngle,eAngle :起始角度、结束角度
  * counterclockwise : 绘制方向,可选，False = 顺时针，true = 逆时针
  * */
 ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.outsideRadius, angle, angle + baseAngle, false);
 ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.insideRadius, angle + baseAngle, angle, true);
 ctx.stroke();
 ctx.fill();
 //保存画布的状态，和图形上下文栈类似，后面可以Restore还原状态（坐标还原为当前的0，0），
 ctx.save();

 /*----绘制奖品内容----重点----*/
 // 红色字体
 ctx.fillStyle = "#E5302F";
 var rewardName = turnWheel.rewardNames[index];
 var line_height = 17;
 // translate方法重新映射画布上的 (0,0) 位置
 // context.translate(x,y);
 // 见PPT图片，
 var translateX = canvasW * 0.5 + Math.cos(angle + baseAngle / 2) * turnWheel.textRadius;
 var translateY = canvasH * 0.5 + Math.sin(angle + baseAngle / 2) * turnWheel.textRadius;
 ctx.translate(translateX, translateY);

 // rotate方法旋转当前的绘图，因为文字适合当前扇形中心线垂直的！
 // angle，当前扇形自身旋转的角度 + baseAngle / 2 中心线多旋转的角度 + 垂直的角度90°
 ctx.rotate(angle + baseAngle / 2 + Math.PI / 2);

 /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
 // canvas 的 measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。
 // fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色. fillStyle 属性以另一种颜色/渐变来渲染文本
 /*
  * context.fillText(text,x,y,maxWidth);
  * 注意！！！y是文字的最底部的值，并不是top的值！！！
  * */
 if(rewardName.indexOf("M") > 0) { //查询是否包含字段 流量包
  var rewardNames = rewardName.split("M");
  for(var j = 0; j < rewardNames.length; j++) {
  ctx.font = (j == 0) ? 'bold 20px Microsoft YaHei' : '16px Microsoft YaHei';
  if(j == 0) {
   ctx.fillText(rewardNames[j] + "M", -ctx.measureText(rewardNames[j] + "M").width / 2, j * line_height);
  } else {
   ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, j * line_height);
  }
  }
 } else if(rewardName.indexOf("M") == -1 && rewardName.length > 6) { //奖品名称长度超过一定范围
  rewardName = rewardName.substring(0, 6) + "||" + rewardName.substring(6);
  var rewardNames = rewardName.split("||");
  for(var j = 0; j < rewardNames.length; j++) {
  ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, j * line_height);
  }
 } else {
  //在画布上绘制填色的文本。文本的默认颜色是黑色
  ctx.fillText(rewardName, -ctx.measureText(rewardName).width / 2, 0);
 }

 //添加对应图标
 if(rewardName.indexOf("Q币") > 0) {
  // 注意，这里要等到img加载完成才能绘制
  imgQb.onload = function() {
  ctx.drawImage(imgQb, -15, 10);
  };
  ctx.drawImage(imgQb, -15, 10);

 } else if(rewardName.indexOf("谢谢参与") >= 0) {
  imgSorry.onload = function() {
  ctx.drawImage(imgSorry, -15, 10);
  };
  ctx.drawImage(imgSorry, -15, 10);
 }
 //还原画板的状态到上一个save()状态之前
 ctx.restore();

 /*----绘制奖品结束----*/

 }
}

如果用到ajax,date.json文件：

{
 "rewardNames":[
 "50M流量包","10Q币",
 "谢谢参与","5Q币",
 "10M流量包","20M流量包",
 "10M流量包","20M流量包",
 "20Q币 ","30M流量包",
 "100M流量包","2Q币"],
 "colors":[
 "#FFF4D7","#FFFFFF",
 "#F0F4D8","#FFFFFF",
 "#FFF4D0","#FFFFFF",
 "#FFF4D0","#FFFFFF",
 "#FFF4D6","#FFFFFF",
 "#FFF4D6","#FFFFFF"]
}

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

用jQuery旋转插件jqueryrotate制作转盘抽奖

- Author -

最骚的就是你

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 类型判断代码分析
Mar 28 Javascript
js闭包实例汇总
Nov 09 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
获取select的value、text值的简单示例（jquery与javascript）
Dec 07 Javascript
JavaScript编写九九乘法表（两种任选）
Feb 04 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 #Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 #Javascript
jQuery排序插件tableSorter使用方法
Feb 10 #Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 #Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 #Javascript
BootStrapValidator初使用教程详解
Feb 10 #Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 #Javascript
国际空间站(1) 对撞机(1) 粒子对撞机(1) FTP服务器(1) 太空(1) 界面设计(1) DNS服务器(2) 夸克(1) 磁盘分区(1) .NET Framework(2)
You might like
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
解决中英文字符串长度问题函数
2007/01/16 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
pygame学习笔记（2）：画点的三种方法和动画实例
2015/04/15 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
Pytorch之Variable的用法
2019/12/31 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
迪士尼英国官方商店：shopDisney UK
2019/09/21 全球购物
全球最受追捧的运动服品牌领先数字目的地：Stylerunner
2020/11/25 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题？
2014/10/03 面试题
党章学习思想汇报
2014/01/14 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
使用feign服务调用添加Header参数
2021/06/23 Java/Android
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis