怎么使用jQuery旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤抽獎
這篇文章主要為大家展示了“怎么使用jQuery旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤抽獎”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么使用jQuery旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤抽獎”這篇文章吧。
成都創(chuàng)新互聯(lián)公司專注于德清企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城建設(shè)。德清網(wǎng)站建設(shè)公司,為德清等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站策劃，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)
具體內(nèi)容如下
原文鏈接：js HTML5 Canvas繪制轉(zhuǎn)盤抽獎
下載地址：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>抽獎轉(zhuǎn)盤</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,
h2,
h3,
h4,
h5,
h6,
h7,
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;
}
/* 大轉(zhuǎn)盤樣式 */
.content {
display: block;
width: 95%;
/*居中顯示*/
margin: 30px auto;
}
.content .wheel {
display: block;
width: 100%;
position: relative;
/*轉(zhuǎn)盤的背景*/
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';
}// 判斷是不是移動設(shè)備
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: [], //轉(zhuǎn)盤獎品名稱數(shù)組
colors: [], //轉(zhuǎn)盤獎品區(qū)塊對應(yīng)背景顏色
outsideRadius: 192, //轉(zhuǎn)盤外圓的半徑
textRadius: 155, //轉(zhuǎn)盤獎品位置距離圓心的距離
insideRadius: 68, //轉(zhuǎn)盤內(nèi)圓的半徑
startAngle: 0, //開始角度
bRotate: false //false:停止;ture:旋轉(zhuǎn)
};
// 圖片信息
var imgQb = new Image();
imgQb.src = "~/../images/qb.png";
var imgSorry = new Image();
imgSorry.src = "~/../images/2.png";
$(document).ready(function() {
// 模擬數(shù)據(jù)，可以Ajax請求服務(wù)器數(shù)據(jù)，添加大轉(zhuǎn)盤的獎品與獎品區(qū)域背景顏色
/*
$.ajax({
type: "POST",
url: "~/../json/data.json",
data: null,
async:false,
dataType:"json", // 返回?cái)?shù)據(jù)類型
success: function(data){
turnWheel.rewardNames = data["rewardNames"];
turnWheel.colors = data["colors"];
},
error: function(data){
alert("網(wǎng)絡(luò)錯誤，請檢查您的網(wǎng)絡(luò)設(shè)置！");
$("#tip").text("請求數(shù)據(jù)失敗");
}
});
*/
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"
];
//旋轉(zhuǎn)轉(zhuǎn)盤 item:獎品序號，從0開始的; txt：提示語 ,count 獎品的總數(shù)量;
function rotateFunc(item, tip, count) {
// 應(yīng)該旋轉(zhuǎn)的角度，旋轉(zhuǎn)插件角度參數(shù)是角度制。
var baseAngle = 360 / count;
// 旋轉(zhuǎn)角度 == 270°（當(dāng)前第一個(gè)角度和指針位置的偏移量） - 獎品的位置 * 每塊所占的角度 - 每塊所占的角度的一半(指針指向區(qū)域的中間)
angles = 360 * 3 / 4 - (item * baseAngle) - baseAngle / 2; // 因?yàn)榈谝粋€(gè)獎品是從0°開始的，即水平向右方向
$('#wheelCanvas').stopRotate();
// 注意，jqueryrotate 插件傳遞的角度不是弧度制。
// 哪個(gè)標(biāo)簽調(diào)用方法，旋轉(zhuǎn)哪個(gè)控件
$('#wheelCanvas').rotate({
angle: 0, //初始旋轉(zhuǎn)的角度數(shù)，并且立即執(zhí)行
animateTo: angles + 360 * 5, // 這里多旋轉(zhuǎn)了5圈，圈數(shù)越多，轉(zhuǎn)的越快
duration: 8000, //指定使用animateTo的動畫執(zhí)行持續(xù)時(shí)間
callback: function() { // 回調(diào)方法
$("#tip").text(tip);
turnWheel.bRotate = !turnWheel.bRotate;
if(isMobile.any()) // 判斷是否移動設(shè)備
{
// 調(diào)OC代碼
window.location.href = "turntable://test.com?" + "index=" + item + "&tip=" + tip;
}
}
});
};
// 抽取按鈕按鈕點(diǎn)擊觸發(fā)事件
$('.pointer').click(function() {
// 正在轉(zhuǎn)動，直接返回
if(turnWheel.bRotate) return;
turnWheel.bRotate = !turnWheel.bRotate;
var count = turnWheel.rewardNames.length;
// 這里應(yīng)該是從服務(wù)器獲取用戶真實(shí)的獲獎信息（對應(yīng)的獲獎序號）
// 簡單模擬隨機(jī)獲取獎品的序號(獎品個(gè)數(shù)范圍內(nèi))
var item = randomNum(0, count - 1);
// 開始抽獎
rotateFunc(item, turnWheel.rewardNames[item], count);
});
});
/*
返回在n和m之間的隨機(jī)整數(shù)
n<= random <=m
*/
function randomNum(n, m) {
/* Math.floor(Math.random()*10);時(shí)，可均衡獲取0到9的隨機(jī)整數(shù)。 */
var random = Math.floor(Math.random() * (m - n)) + n;
console.log("rewardNames["+random+"]");
return random;
}
//頁面所有元素加載完畢后執(zhí)行drawWheelCanvas()方法對轉(zhuǎn)盤進(jìn)行渲染
window.onload = function() {
drawWheelCanvas();
};
/*
* 渲染轉(zhuǎn)盤
* */
function drawWheelCanvas() {
// 獲取canvas畫板，相當(dāng)于layer？？
var canvas = document.getElementById("wheelCanvas");
// var canvas = ($("#wheelCanvas")).get()[0]; // 注意，jQuery獲取的是包裝過的對象，不是DOM對象,可以進(jìn)行轉(zhuǎn)換
// 計(jì)算每塊占的角度，弧度制
var baseAngle = Math.PI * 2 / (turnWheel.rewardNames.length);
// 獲取上下文
var ctx = canvas.getContext("2d");
var canvasW = canvas.width; // 畫板的高度
var canvasH = canvas.height; // 畫板的寬度
//在給定矩形內(nèi)清空一個(gè)矩形
ctx.clearRect(0, 0, canvasW, canvasH);
//strokeStyle 繪制顏色
ctx.strokeStyle = "#FFBE04"; // 紅色
//font 畫布上文本內(nèi)容的當(dāng)前字體屬性
ctx.font = '16px Microsoft YaHei';
// 注意，開始畫的位置是從0°角的位置開始畫的。也就是水平向右的方向。
// 畫具體內(nèi)容
for(var index = 0; index < turnWheel.rewardNames.length; index++) {
// 當(dāng)前的角度
var angle = turnWheel.startAngle + index * baseAngle;
// 填充顏色
ctx.fillStyle = turnWheel.colors[index];
// 開始畫內(nèi)容
// ---------基本的背景顏色----------
ctx.beginPath();
/*
* 畫圓弧，和IOS的Quartz2D類似
* context.arc(x,y,r,sAngle,eAngle,counterclockwise);
* x :圓的中心點(diǎn)x
* y :圓的中心點(diǎn)x
* sAngle,eAngle :起始角度、結(jié)束角度
* counterclockwise : 繪制方向,可選，F(xiàn)alse = 順時(shí)針，true = 逆時(shí)針
* */
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();
//保存畫布的狀態(tài)，和圖形上下文棧類似，后面可以Restore還原狀態(tài)（坐標(biāo)還原為當(dāng)前的0，0），
ctx.save();
/*----繪制獎品內(nèi)容----重點(diǎn)----*/
// 紅色字體
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方法旋轉(zhuǎn)當(dāng)前的繪圖，因?yàn)槲淖诌m合當(dāng)前扇形中心線垂直的！
// angle，當(dāng)前扇形自身旋轉(zhuǎn)的角度 + baseAngle / 2 中心線多旋轉(zhuǎn)的角度 + 垂直的角度90°
ctx.rotate(angle + baseAngle / 2 + Math.PI / 2);
/** 下面代碼根據(jù)獎品類型、獎品名稱長度渲染不同效果，如字體、顏色、圖片效果。(具體根據(jù)實(shí)際情況改變) **/
// canvas 的 measureText() 方法返回包含一個(gè)對象，該對象包含以像素計(jì)的指定字體寬度。
// fillText() 方法在畫布上繪制填色的文本。文本的默認(rèn)顏色是黑色. 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 {
//在畫布上繪制填色的文本。文本的默認(rèn)顏色是黑色
ctx.fillText(rewardName, -ctx.measureText(rewardName).width / 2, 0);
}
//添加對應(yīng)圖標(biāo)
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);
}
//還原畫板的狀態(tài)到上一個(gè)save()狀態(tài)之前
ctx.restore();
/*----繪制獎品結(jié)束----*/
}
}如果用到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旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤抽獎”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
新聞標(biāo)題：怎么使用jQuery旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤抽獎
URL鏈接：http://www.yijiale78.com/article30/pdsgso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、網(wǎng)站營銷、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、響應(yīng)式網(wǎng)站、
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 網(wǎng)站制作過程中必不可少的六大要素 2023-03-24
- 企業(yè)在網(wǎng)站制作設(shè)計(jì)前應(yīng)該理清需求 2021-08-07
- 網(wǎng)站制作的移動開發(fā)者認(rèn)證是否值得 2013-11-15
- 重慶企業(yè)網(wǎng)站制作中需要注意的事項(xiàng) 2021-01-20
- 如何縮短新站被百度收錄的時(shí)間？ 2014-04-10
- 免費(fèi)開發(fā)小程序-免費(fèi)小程序開發(fā)不要錢？當(dāng)心被騙! 2016-11-09
- 對網(wǎng)站制作發(fā)展方向的分析 2021-09-03
- 建站公司網(wǎng)站制作經(jīng)驗(yàn)技巧 2016-11-05
- 怎樣的網(wǎng)站制作能引領(lǐng)企業(yè)前進(jìn) 2022-08-09
- 成都網(wǎng)站制作：企業(yè)如何自己購買主機(jī)？ 2022-12-08
- 網(wǎng)站制作需要充分考慮四大要點(diǎn) 2023-01-02
- 網(wǎng)站制作中優(yōu)化因素有哪些？ 2021-04-25