首页
所有分类
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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
vue递归实现树形组件
Jul 15 Vue.js
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
TypeScript(2) NumPy(2) keeplive_timeout(1) 区块链(2) location(2) http_stub_status_module(1) 双向链表(6) RTMP(1) zabbix(9) text-shadow(1)
You might like
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
php object转数组示例
2014/01/15 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
Javascript 类型转换方法
2010/10/24 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
第一次记录Bootstrap table学习笔记（1）
2017/05/18 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
如何在django中添加日志功能
2020/02/06 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
html5读取本地文件示例代码
2014/04/22 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
优衣库英国官网：UNIQLO英国
2016/12/25 全球购物
西班牙香水和化妆品网上商店：Douglas
2017/10/29 全球购物
英国品牌男装折扣网站：Brown Bag
2018/03/08 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
化学相关工作求职信
2013/10/02 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
关于青春的演讲稿
2014/05/05 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
《去年的树》教学反思
2016/02/18 职场文书
检讨书之工作不认真
2019/08/14 职场文书