利用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>
        <p class="content">
            <p class="wheel">
                <canvas class="item" id="wheelCanvas" width="422px" height="422px"></canvas>
                <img class="pointer" src="images/wheel-pointer.png" />
            </p>
        </p>
        <p class="tips">
            <span id="tip">jason</span>
        </p>
    </body>

</html>
/*初始化樣式*/

body,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
table,
td,
img,
p {
    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);
         * 註意!!!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();

        /*----繪制獎品結束----*/

    }
}

如果用到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"]
}

發佈留言