抽奖圆的canvas动画

效果图：

HTML代码为：

<div class="turnplate_box">
    <canvas id="myCanvas" width="300px" height="300px">抱歉！浏览器不支持。</canvas>
    <canvas id="myCanvas01" width="200px" height="200px">抱歉！浏览器不支持。</canvas>
    <canvas id="myCanvas03" width="200px" height="200px">抱歉！浏览器不支持。</canvas>
    <canvas id="myCanvas02" width="150px" height="150px">抱歉！浏览器不支持。</canvas>
    <button id="tupBtn" class="turnplatw_btn"></button>
</div>

CSS代码为：

*{padding: 0px;margin: 0px;font-size: 16px;font-family: "Microsoft YaHei";}
.turnplate_box{width: 300px;height: 300px;margin: 100px auto;position: relative; }
.turnplate_box canvas{position: absolute;}
#myCanvas{background-color: white;border-radius: 100%;}
#myCanvas01,#myCanvas03{left: 50px;top: 50px;z-index: 30;}
#myCanvas02{left: 75px;top: 75px;z-index: 20;}
#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: 60px;height: 60px;left: 120px;top: 120px;border-radius: 100%;position: absolute;cursor: pointer;border: none;background: transparent;outline: none;z-index: 40;}

JS代码生成:按照概率输出的问题

$(function(){
    //旋转角度
    var angles;
    //可抽奖次数
    var clickNum=5;
    //旋转次数
    var rotNum=0;
    //中奖公告
    var notice=null;
    //转盘初始化
    var color = ["#626262","#787878","rgba(0,0,0,0.5)","#DCC722","white","#FF4350"];
    var info = ["谢谢参与","  1000","   10","  500","  100"," 4999","    1","   20"];
    var info1 = ['再接再厉','      元','     元','  淘金币','     元','  淘金币','     元','  淘金币']
    canvasRun();
    $('#tupBtn').bind('click',function(){
        if(clickNum >= 1){
            //可抽奖次数减去一
            clickNum=clickNum-1;
            //转盘旋转
            runCup();
            //转盘旋转过程“开始抽奖”按钮无法点击
            $('#tupBtn').attr('disabled',true);
            //旋转次数加一
            rotNum=rotNum + 1;
            setTimeout(function(){
                alert(notice);
                $('#tupBtn').removeAttr('disabled',true);
            },6000);
        }else{
            alert('亲，抽奖次数已用光！');
        }
    });
    //转盘旋转
    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);
        var num = Math.floor(Math.random()*10+1);
        //alert(num);
        if(num <=5){
            angles=2160 * rotNum + 1800;  //1800意思是转动5次
            notice=info[0] + info1[0];

        }else if(num <= 6){
            angles=2160* rotNum + 1980;
            notice=info[4] + info1[4];
            
        }else if(num <= 8){
            angles=2160 * rotNum +1890;
            notice=info[6] + info1[6];
        }else if(num <= 9){
            angles=2160 * rotNum + 2070;
            notice=info[2] + info1[2];
        }else{
            angles=2160 * rotNum + 1845;
            notice=info[7] + info1[7];
        }
    }
    //绘制转盘
    function canvasRun(){
        var canvas=document.getElementById('myCanvas');
        var canvas01=document.getElementById('myCanvas01');
        var canvas03=document.getElementById('myCanvas03');
        var canvas02=document.getElementById('myCanvas02');
        var ctx=canvas.getContext('2d');
        var ctx1=canvas01.getContext('2d');
        var ctx3=canvas03.getContext('2d');
        var ctx2=canvas02.getContext('2d');
        createCircle();  
        createCirText(); 
        initPoint();

        //外圆
        function createCircle(){
            var startAngele =0;//扇形的开始弧度
            var endAngle=0;//扇形的终止弧度
            //画一个8等分扇形组成的圆形
            for(var i=0; i<8; i++){
                startAngle=Math.PI*(i/4-1/8);
                endAngle=startAngle+Math.PI*(1/4);
                ctx.save();//保存当前环境的状态
                ctx.beginPath();  //起始一条路径，或重置当前路径
                ctx.arc(150,150,100,startAngle,endAngle,false);  //创建弧/曲线（用于创建圆形或部分圆）x左边、Y坐标、半径、起始角、结束角、false顺时针
                ctx.lineWidth=120;
                if(i%2 === 0){
                    ctx.strokeStyle=color[0];
                }else{
                    ctx.strokeStyle=color[1];
                }
                ctx.stroke();//绘制已定义的路径
                ctx.restore();
            }
        }  
        //各奖项
        function createCirText(){
            ctx.textAlign='start';//默认。文本在指定的位置开始。
            ctx.textBaseline='middle';//设置或返回在绘制文本时使用的当前文本基线
            ctx.fillStyle=color[3]; //设置或返回用于填充绘画的颜色、渐变或模式
            var step=2*Math.PI/8;
            for(var i=0; i < 8; i++){
                ctx.save();
                ctx.beginPath();
                ctx.translate(150,150);//重新映射画布上的 (0,0) 位置
                ctx.rotate(i*step);//旋转当前绘图
                ctx.font='20px Microsoft YaHei';
                ctx.fillStyle=color[3];
                ctx.fillText(info[i],-30,-115,60);
                ctx.font='14px Microsoft YaHei';
                ctx.fillText(info1[i],-30,-95,60);//在画布上绘制“被填充的”文本,文本，相对画布X，相对画布Y，文本最大宽度
                ctx.closePath();//创建从当前点回到起始点的路径
                ctx.restore();  //返回之前保存过的路径状态和属性
            }
        } 
        //
        function initPoint(){
            //箭头指针
            ctx1.beginPath();
            ctx1.moveTo(100,24);//把路径移动到画布中的指定点，不创建线条-目标位置的 x y坐标
            ctx1.lineTo(90,62);
            ctx1.lineTo(110,62);
            ctx1.lineTo(100,24);
            ctx1.fillStyle=color[5];
            ctx1.fill();//填充当前绘图（路径）
            ctx1.closePath();//创建从当前点回到起始点的路径
            //中间小圆
            ctx3.beginPath();
            ctx3.arc(100,100,40,0,Math.PI*2,false);
            ctx3.fillStyle=color[5];
            ctx3.fill();
            ctx3.closePath();
            //小圆文字
            ctx3.font='Bold 20px Microsoft YaHei';
            ctx3.textAlign='start';
            ctx3.textBaseline='middle';
            ctx3.fillStyle=color[4];
            ctx3.beginPath();
            ctx3.fillText('开始',80,90,40);
            ctx3.fillText('抽奖',80,110,40);
            ctx3.fill();
            ctx3.closePath();
            //中间大圆
            ctx2.beginPath();
            ctx2.arc(75,75,75,0,Math.PI*2,false);
            ctx2.fillStyle=color[2];
            ctx2.fill();
            ctx2.closePath();
        }
    }
});

本地效果为：app/html5canvas/lottery/demo.html

线上效果为：http://www.17sucai.com/pins/14555.html