利用jQuery旋轉外掛jqueryrotate製作轉盤抽獎
阿新 • • 發佈：2018-12-19
<!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 - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
/*初始化樣式*/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';}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
// 判斷是不是移動裝置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); * 注意！！！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 { //在畫布上繪製填色的文字。文字的預設顏色是黑色 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(); /*----繪製獎品結束----*/ }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
如果用到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"]}