1. 程式人生 > >利用jQuery旋轉外掛jqueryrotate製作轉盤抽獎

利用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">
        <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>
  • 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"]}