用jQuery旋轉插件jqueryrotate制作轉盤抽獎

2019-11-19 17:38:20

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了jQuery旋轉插件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);  * 注意！?。是文字的最底部的值，并不是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"]}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。

上一篇：angularjs實現的前端分頁控件示例

下一篇：jQuery html表格排序插件tablesorter使用方法詳解