canvas實現轉盤功能 ---- H5

1. IOS端點擊圖片閃屏

這個屬性只用於iOS (iPhone和iPad)。當你點擊一個鏈接或者通過Javascript定義的可點擊元素的時候，它就會出現一個半透明的灰色背景。

body, html {
    -webkit-tap-highlight-color:transparent;
}

2. 關鍵的canvas 繪圖

效果圖: 點擊之後轉盤轉動，然後彈出中獎結果

需要解決的問題：

• 繪製轉盤
• 繪製文字及圖片
• 實現轉盤功能
• 解決canvas繪圖不清晰的問題

    <div class="turnplate_box">
        <canvas id="myCanvas" width="260px" height="260px">抱歉！瀏覽器不支持。</canvas>
        <button id="tupBtn" class="turnplatw_btn">  // 中間點擊抽獎的那個按鈕啊
            <img src="./imgs/luckBtn.png" class="turnplatw_img">
        </button>
    </div>

.turnplate_box {
    width: 300px;
    height: 300px;
    margin: 180px auto 0;
    position: relative;
}

.turnplate_box canvas {
    position: absolute;
    z-index: 10;
}

#myCanvas {
    background-color: white;
    border-radius: 100%;
}

#myCanvas {
    -o-transform: transform 6s;
    -ms-transform: transform 6s;
    -moz-transform: transform 6s;
    -webkit-transform: transform 6s;
    transition: transform 6s;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.turnplatw_btn {
    width: 122px;
    height: 122px;
    left: 89px;
    top: 60px;
    border-radius: 100%;
    position: absolute;
    cursor: pointer;
    border: none;
    background: transparent;
    outline: none;
    z-index: 40;
}
.turnplatw_img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

js文件：

    //旋轉角度
    var angles;
    //可抽獎次數
    var clickNum = 2;
    //旋轉次數
    var rotNum = 0;
    //中獎公告
    var notice = null;
    // 有幾份扇形
    var number = 8;
    // 園的半徑
    var radius = 130;
    //轉盤初始化
    var color = ["#fde284", "#fe9103", "rgba(0,0,0,0.5)", "#ffffff", "#b10105", "#fbc605"];
    var info = ["謝謝參與", "1000", "10", "500", "100", "4999", "1", "20", "1", "20"];
    var infoImg = ['imgs/canvasImg2.png', '', 'imgs/canvasImg.png', 'imgs/canvasImg2.png', '', 'imgs/canvasImg2.png', 'imgs/canvasImg.png', 'imgs/canvasImg.png', 'imgs/canvasImg.png', 'imgs/canvasImg.png']
    
 canvasRun()
 function canvasRun() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        // 屏幕的設備像素比
        var devicePixelRatio = window.devicePixelRatio || 1;
        // 瀏覽器在渲染canvas之前存儲畫布信息的像素比
        var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
            ctx.mozBackingStorePixelRatio ||
            ctx.msBackingStorePixelRatio ||
            ctx.oBackingStorePixelRatio ||
            ctx.backingStorePixelRatio || 1;
        // canvas的實際渲染倍率
        var ratio = devicePixelRatio / backingStoreRatio;

        canvas.style.width = canvas.width;
        canvas.style.height = canvas.height;

        canvas.width = canvas.width * ratio;
        canvas.height = canvas.height * ratio;
 
        $("#myCanvas").css({"left":"calc(50% - "+canvas.width/2+"px"+")"})
        $("#myCanvas").css({"zoom":1/ratio})

        createCircle(ratio);
        createCirText(ratio);

        //外圓
        function createCircle(ratio) {
            var startAngle = 0;//扇形的開始弧度
            var endAngle = 0;//扇形的終止弧度
            getCircleOffset();
            //畫一個8等份扇形組成的圓形
            for (var i = 0; i < number; i++) {
                startAngle = (Math.PI * 2 * i / number) - (Math.PI / number);
                endAngle = startAngle + Math.PI * 2 / number;
                ctx.save();
                ctx.beginPath();
                ctx.arc(radius*ratio, radius*ratio, radius, startAngle, endAngle, false);
                ctx.lineWidth = 220*ratio;
                if (i % 2 == 0) {
                    ctx.strokeStyle = color[0];
                } else {
                    ctx.strokeStyle = color[1];
                }
                ctx.stroke();
                ctx.restore();
            }
        }

        //各獎項
        function createCirText(ratio) {
            ctx.textAlign = 'start';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = color[3];

            var step = 2 * Math.PI / number;
            for (var i = 0; i < number; i++) {
                (function (arg) {
                    var img=new Image()
                    img.src=infoImg[arg]
                    img.onload = function() {
                        ctx.save();
                        ctx.scale(ratio,ratio);
                        ctx.beginPath();
                        ctx.translate(radius, radius);
                        ctx.rotate(arg * step);
                        ctx.font = " 18px Microsoft YaHei";
                        ctx.textAlign = 'center';
                        ctx.fillStyle = color[3];
                        ctx.fillText(info[arg], 0, -110, 50);
                        ctx.drawImage(img,-16,-100,35,35);
                        ctx.closePath();
                        ctx.restore();
                        // console.log("圖片的地址",arg,info[arg],img,)
                    }
                    // 沒有圖片時也需要寫文字
                    img.onerror = function(){
                        ctx.save();
                        ctx.beginPath();
                        ctx.scale(ratio,ratio);
                        ctx.translate(radius, radius);
                        ctx.rotate(arg * step);
                        ctx.textAlign = 'center';
                        ctx.font = " 18px Microsoft YaHei";
                        ctx.fillStyle = color[3];
                        ctx.fillText(info[arg], 0, -110, 50);
                        ctx.closePath();
                        ctx.restore();
                    }
                })(i)
            }
        }
        // 計算扇形的偏移量，以保證12點鐘方向指向扇形區域的中間
        function getCircleOffset() {
            // 到12點鐘方向的偏移量
            var offset = 0;
            // var verticalOffset = Math.PI / 2;
            if (number % 2 != 0) {
                offset = Math.PI * 2/number
            }
            if (number % 2 == 0 && number / 2 & 2 != 0) {
                offset = 0;
            } else {
            }
            return offset;
        }
    }
    //轉盤旋轉
    function runCup() {
        probability();
        var degValue = 'rotate(' + angles + 'deg' + ')';
        $('#myCanvas').css('-o-transform', degValue);           //Opera
        $('#myCanvas').css('-ms-transform', degValue);          //IE瀏覽器
        $('#myCanvas').css('-moz-transform', degValue);         //Firefox
        $('#myCanvas').css('-webkit-transform', degValue);      //Chrome和Safari
        $('#myCanvas').css('transform', degValue);
    }

    //各獎項對應的旋轉角度及中獎公告內容
    function probability() {
        //獲取隨機數
     	var num = parseInt(Math.random() * 7);

        //概率
        if (num == 0) {
            angles = 1800 * rotNum + 1800;
            notice = info[0];
        }
        //概率
        else if (num == 1) {
            angles = 2160 * rotNum + 1845;
            notice = info[7];
        }
        //概率
        else if (num == 2) {
            angles = 2160 * rotNum + 1890;
            notice = info[6];
        }
        //概率
        else if (num == 3) {
            angles = 2160 * rotNum + 1935;
            notice = info[5];
        }
        //概率
        else if (num == 4) {
            angles = 2160 * rotNum + 1980;
            notice = info[4];
        }
        //概率
        else if (num == 5) {
            angles = 2160 * rotNum + 2025;
            notice = info[3];
        }
        //概率
        else if (num == 6) {
            angles = 2160 * rotNum + 2070;
            notice = info[2];
        }
        //概率
        else if (num == 7) {
            angles = 2160 * rotNum + 2115;
            notice = info[1];
        }
    }

點擊按鈕事件

       if (clickNum >= 1) {
           //可抽獎次數減一
           clickNum = clickNum - 1;
           //轉盤旋轉
           runCup();
           //轉盤旋轉過程“開始抽獎”按鈕無法點擊
           $('#tupBtn').attr("disabled", true);
           //旋轉次數加一
           rotNum = rotNum + 1;
           //“開始抽獎”按鈕無法點擊恢復點擊
           setTimeout(function () {
               alert(notice);
               // TODO：中獎信息類型判斷
               // $('#virtualText').html(notice)
               // Utils.showItem($(".shade_bg"),300);
               // Utils.showItem($("#virtualBox"),300);
               $('#tupBtn').removeAttr("disabled", true);
           }, 6000);
       } else {
           // 抽獎積分不足
          
       }

3. 禁止部分區域下拉

在微信中打開的頁面，中下拉的時候禁止顯示 瀏覽器的信息

    document.getElementById("recordInner_page").addEventListener('touchmove', function(e) {
        if (!document.querySelector('.recordList_box').contains(e.target)) {
            e.preventDefault();
        }
    }, false);

4. 獲取手機型號

     var phone_flag = navigator.userAgent.toLowerCase();
     if (phone_flag.search(/iphone/) != -1) {
         // alert("蘋果手機---》"+phone_flag)
        // $(".address_textarea").css('marginLeft',-10)
     }else {
        // alert("安卓機"+phone_flag)
    }