原文链接：http://www.cnblogs.com/bingwei/p/4830932.html
下载地址：http://download.csdn.net/detail/cometwo/9602323
<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">
<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">jasonspan>
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
};
var imgQb = new Image();
imgQb.src = "~/../images/qb.png";
var imgSorry = new Image();
imgSorry.src = "~/../images/2.png";
$(document).ready(function() {
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"
];
function rotateFunc(item, tip, count) {
var baseAngle = 360 / count;
angles = 360 * 3 / 4 - (item * baseAngle) - baseAngle / 2;
$('#wheelCanvas').stopRotate();
$('#wheelCanvas').rotate({
angle: 0,
animateTo: angles + 360 * 5,
duration: 8000,
callback: function() {
$("#tip").text(tip);
turnWheel.bRotate = !turnWheel.bRotate;
if(isMobile.any())
{
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);
});
});
function randomNum(n, m) {
var random = Math.floor(Math.random() * (m - n)) + n;
console.log("rewardNames["+random+"]");
return random;
}
window.onload = function() {
drawWheelCanvas();
};
function drawWheelCanvas() {
var canvas = document.getElementById("wheelCanvas");
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);
ctx.strokeStyle = "#FFBE04";
ctx.font = '16px Microsoft YaHei';
for(var index = 0; index < turnWheel.rewardNames.length; index++) {
var angle = turnWheel.startAngle + index * baseAngle;
ctx.fillStyle = turnWheel.colors[index];
ctx.beginPath();
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();
ctx.save();
ctx.fillStyle = "#E5302F";
var rewardName = turnWheel.rewardNames[index];
var line_height = 17;
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);
ctx.rotate(angle + baseAngle / 2 + Math.PI / 2);
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) {
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);
}
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"]
}
