最骚的就是你通过本文主要向大家介绍了jqueryrotate,jqueryrotate.js,jqueryrotate.js下载,jqueryrotate.2.2.js,jquery.rotate.min.js等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
本文实例为大家分享了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></div>
/*初始化样式*/
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';
}
</div>
// 判断是不是移动设备
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.insideRadiu