Html5-Canvas實現簡易的抽獎轉盤

時間 2019-11-12

標籤 html5 html canvas 實現簡易抽獎轉盤欄目 HTML5 简体版

原文原文鏈接

###Html5實現抽獎轉盤效果

1.實現的基本效果

2.主要的內容
- html5中canvas標籤的使用
- jQueryRotate.js旋轉插件
3.主要html代碼

<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>

4.主要的css代碼

.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.6%;
    top:23%;
}

.tips{
    text-align:center;
    margin:20px 0;
    font:normal 24px 'MicroSoft YaHei';
}

5.核心js代碼

/*
 * 渲染轉盤
 * */
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();

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

    }
}