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