用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"]
}

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

Javascript 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 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
You might like
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
解放web程序员的输入验证
2006/10/06 Javascript
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
React中的refs的使用教程
2018/02/13 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
python检测某个变量是否有定义的方法
2015/05/20 Python
Python验证码识别处理实例
2015/12/28 Python
python pyheatmap包绘制热力图
2018/11/09 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
《从现在开始》教学反思
2014/04/15 职场文书
音乐节策划方案
2014/06/09 职场文书
优秀教师推荐材料
2014/12/16 职场文书
道歉短信大全
2015/05/12 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
python中print格式化输出的问题
2021/04/16 Python