免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

怎么使用jQuery旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤(pán)抽獎(jiǎng)

這篇文章主要為大家展示了“怎么使用jQuery旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤(pán)抽獎(jiǎng)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么使用jQuery旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤(pán)抽獎(jiǎng)”這篇文章吧。

成都創(chuàng)新互聯(lián)公司專(zhuān)注于德清企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城建設(shè)。德清網(wǎng)站建設(shè)公司,為德清等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站策劃，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

具體內(nèi)容如下

怎么使用jQuery旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤(pán)抽獎(jiǎng)

原文鏈接：js HTML5 Canvas繪制轉(zhuǎn)盤(pán)抽獎(jiǎng)

下載地址：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>抽獎(jiǎng)轉(zhuǎn)盤(pá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)盤(pán)樣式 */

.content {
 display: block;
 width: 95%;
 /*居中顯示*/
 margin: 30px auto;
}

.content .wheel {
 display: block;
 width: 100%;
 position: relative;
 /*轉(zhuǎn)盤(pá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';
}
// 判斷是不是移動(dòng)設(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)盤(pán)獎(jiǎng)品名稱(chēng)數(shù)組
 colors: [], //轉(zhuǎn)盤(pán)獎(jiǎng)品區(qū)塊對(duì)應(yīng)背景顏色
 outsideRadius: 192, //轉(zhuǎn)盤(pán)外圓的半徑
 textRadius: 155, //轉(zhuǎn)盤(pán)獎(jiǎng)品位置距離圓心的距離
 insideRadius: 68, //轉(zhuǎn)盤(pán)內(nèi)圓的半徑
 startAngle: 0, //開(kāi)始角度

 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請(qǐng)求服務(wù)器數(shù)據(jù)，添加大轉(zhuǎn)盤(pán)的獎(jiǎng)品與獎(jiǎng)品區(qū)域背景顏色
 /*
 $.ajax({
 type: "POST",
 url: "~/../json/data.json",
 data: null,
 async:false,
 dataType:"json", // 返回?cái)?shù)據(jù)類(lèi)型
 success: function(data){
  turnWheel.rewardNames = data["rewardNames"];
  turnWheel.colors = data["colors"];
 },
 error: function(data){
  alert("網(wǎng)絡(luò)錯(cuò)誤，請(qǐng)檢查您的網(wǎng)絡(luò)設(shè)置！");
  $("#tip").text("請(qǐng)求數(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)盤(pán) item:獎(jiǎng)品序號(hào)，從0開(kāi)始的; txt：提示語(yǔ) ,count 獎(jiǎng)品的總數(shù)量;
 function rotateFunc(item, tip, count) {

 // 應(yīng)該旋轉(zhuǎn)的角度，旋轉(zhuǎn)插件角度參數(shù)是角度制。
 var baseAngle = 360 / count;
 // 旋轉(zhuǎn)角度 == 270°（當(dāng)前第一個(gè)角度和指針位置的偏移量） - 獎(jiǎng)品的位置 * 每塊所占的角度 - 每塊所占的角度的一半(指針指向區(qū)域的中間)
 angles = 360 * 3 / 4 - (item * baseAngle) - baseAngle / 2; // 因?yàn)榈谝粋€(gè)獎(jiǎng)品是從0°開(kāi)始的，即水平向右方向
 $('#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的動(dòng)畫(huà)執(zhí)行持續(xù)時(shí)間
  callback: function() { // 回調(diào)方法
  $("#tip").text(tip);
  turnWheel.bRotate = !turnWheel.bRotate;
  if(isMobile.any()) // 判斷是否移動(dòng)設(shè)備
  {
   // 調(diào)OC代碼
   window.location.href = "turntable://test.com?" + "index=" + item + "&tip=" + tip;
  }
  }
 });
 };

 // 抽取按鈕按鈕點(diǎn)擊觸發(fā)事件
 $('.pointer').click(function() {
 // 正在轉(zhuǎn)動(dòng)，直接返回
 if(turnWheel.bRotate) return;

 turnWheel.bRotate = !turnWheel.bRotate;
 var count = turnWheel.rewardNames.length;

 // 這里應(yīng)該是從服務(wù)器獲取用戶(hù)真實(shí)的獲獎(jiǎng)信息（對(duì)應(yīng)的獲獎(jiǎng)序號(hào)）
 // 簡(jiǎn)單模擬隨機(jī)獲取獎(jiǎng)品的序號(hào)(獎(jiǎng)品個(gè)數(shù)范圍內(nèi))
 var item = randomNum(0, count - 1);
 // 開(kāi)始抽獎(jiǎng)
 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;

}

//頁(yè)面所有元素加載完畢后執(zhí)行drawWheelCanvas()方法對(duì)轉(zhuǎn)盤(pán)進(jìn)行渲染
window.onload = function() {
 drawWheelCanvas();
};

/*
 * 渲染轉(zhuǎn)盤(pán)
 * */
function drawWheelCanvas() {

 // 獲取canvas畫(huà)板，相當(dāng)于layer？？
 var canvas = document.getElementById("wheelCanvas");
 // var canvas = ($("#wheelCanvas")).get()[0]; // 注意，jQuery獲取的是包裝過(guò)的對(duì)象，不是DOM對(duì)象,可以進(jìn)行轉(zhuǎn)換

 // 計(jì)算每塊占的角度，弧度制
 var baseAngle = Math.PI * 2 / (turnWheel.rewardNames.length);
 // 獲取上下文
 var ctx = canvas.getContext("2d");

 var canvasW = canvas.width; // 畫(huà)板的高度
 var canvasH = canvas.height; // 畫(huà)板的寬度
 //在給定矩形內(nèi)清空一個(gè)矩形
 ctx.clearRect(0, 0, canvasW, canvasH);

 //strokeStyle 繪制顏色
 ctx.strokeStyle = "#FFBE04"; // 紅色
 //font 畫(huà)布上文本內(nèi)容的當(dāng)前字體屬性
 ctx.font = '16px Microsoft YaHei';

 // 注意，開(kāi)始畫(huà)的位置是從0°角的位置開(kāi)始畫(huà)的。也就是水平向右的方向。
 // 畫(huà)具體內(nèi)容
 for(var index = 0; index < turnWheel.rewardNames.length; index++) {
 // 當(dāng)前的角度
 var angle = turnWheel.startAngle + index * baseAngle;
 // 填充顏色
 ctx.fillStyle = turnWheel.colors[index];

 // 開(kāi)始畫(huà)內(nèi)容
 // ---------基本的背景顏色----------
 ctx.beginPath();
 /*
  * 畫(huà)圓弧，和IOS的Quartz2D類(lèi)似
  * 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();
 //保存畫(huà)布的狀態(tài)，和圖形上下文棧類(lèi)似，后面可以Restore還原狀態(tài)（坐標(biāo)還原為當(dāng)前的0，0），
 ctx.save();

 /*----繪制獎(jiǎng)品內(nèi)容----重點(diǎn)----*/
 // 紅色字體
 ctx.fillStyle = "#E5302F";
 var rewardName = turnWheel.rewardNames[index];
 var line_height = 17;
 // translate方法重新映射畫(huà)布上的 (0,0) 位置
 // context.translate(x,y);
 // 見(jiàn)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)前扇形中心線(xiàn)垂直的！
 // angle，當(dāng)前扇形自身旋轉(zhuǎn)的角度 + baseAngle / 2 中心線(xiàn)多旋轉(zhuǎn)的角度 + 垂直的角度90°
 ctx.rotate(angle + baseAngle / 2 + Math.PI / 2);

 /** 下面代碼根據(jù)獎(jiǎng)品類(lèi)型、獎(jiǎng)品名稱(chēng)長(zhǎng)度渲染不同效果，如字體、顏色、圖片效果。(具體根據(jù)實(shí)際情況改變) **/
 // canvas 的 measureText() 方法返回包含一個(gè)對(duì)象，該對(duì)象包含以像素計(jì)的指定字體寬度。
 // fillText() 方法在畫(huà)布上繪制填色的文本。文本的默認(rèn)顏色是黑色. fillStyle 屬性以另一種顏色/漸變來(lái)渲染文本
 /*
  * context.fillText(text,x,y,maxWidth);
  * 注意！！！y是文字的最底部的值，并不是top的值！！！
  * */
 if(rewardName.indexOf("M") > 0) { //查詢(xún)是否包含字段 流量包
  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) { //獎(jiǎng)品名稱(chēng)長(zhǎng)度超過(guò)一定范圍
  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 {
  //在畫(huà)布上繪制填色的文本。文本的默認(rèn)顏色是黑色
  ctx.fillText(rewardName, -ctx.measureText(rewardName).width / 2, 0);
 }

 //添加對(duì)應(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);
 }
 //還原畫(huà)板的狀態(tài)到上一個(gè)save()狀態(tài)之前
 ctx.restore();

 /*----繪制獎(jiǎng)品結(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)盤(pán)抽獎(jiǎng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：怎么使用jQuery旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤(pán)抽獎(jiǎng)
URL鏈接：http://m.newbst.com/article30/pdsgso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、網(wǎng)站營(yíng)銷(xiāo)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、響應(yīng)式網(wǎng)站、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化