首页
所有分类
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来生成ftp脚本的小例子
Jul 03 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
javascript中this用法实例详解
Apr 06 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
深入了解JavaScript 私有化
May 30 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 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
pytest(3) 进销存(1) enumerate(1) Excel(4) csv(4) greenlet(1) gevent(1) find(1) list(1) Coroutine(1)
You might like
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
PHP中的表达式简述
2016/05/29 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
jquery选择器排除某个DOM元素的方法（实例演示）
2014/04/25 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
jQuery给div,Span, a ，button, radio 赋值与取值
2016/06/24 Javascript
javascript事件的绑定基础实例讲解（34）
2017/02/14 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
Python实现partial改变方法默认参数
2014/08/18 Python
Python实现数据库编程方法详解
2015/06/09 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
KIKO MILANO俄罗斯官网：意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
单位租房协议书范本
2014/12/04 职场文书
研讨会通知
2015/04/27 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers