HTML5之CANVAS学习，实现抽奖转盘

                     实现个小例子来达到学习的目的，无疑是最好的。很看到网上有很多已经实现的转盘游戏，自己也试着写了一个，思路是：画一个圆盘，分成10份，设立10个奖项，中间有个指针，点抽奖后旋转指针。

代码如下：

             1.画圆盘

        //绘制转盘圆环
        function createCircle(){
            //圆环上的颜色
            var color = ["#D14278","#953FAE","#586837","#C7C76F","#AF2729","#3A9C76","#CCA540","#5998FE","#52DB53","#FEB834"];
            var startAngle = 0;//扇形的开始弧度
            var endAngle = 0;//扇形的终止弧度
            //画一个10等份扇形组成的圆形
            for (var i = 0; i< 10; i++){

                startAngle = Math.PI*(2/10)*i;//0到2PI是一个整圆
                endAngle = Math.PI*(2/10)*(i+1);
                //保存当前绘画状态，以便我们画完这副画以后restore（）再恢复到这个状态，画另一副画。
                ctx.save();
                ctx.beginPath();
                /*ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
                x和y参数是圆心坐标，radius是半径，
                startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），
                anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）
                */
                ctx.arc(centerX, centerY, 150, startAngle, endAngle, false);
                ctx.lineWidth = 160.0;
                ctx.strokeStyle =  color[i];
                ctx.stroke();//空心圆
                ctx.restore();
            }
            
        }

      2.绘制扇形上的字，即奖项

       var info=["一等奖","特等奖","三等奖","四等奖","五等奖","安慰奖","谢谢参与","八等奖","九等奖","十等奖"];
        function createCirText(){
            
            ctx.font = "Bold 20px Arial"; // 设置字体
            ctx.textAlign='start';//文本水平对齐方式
            ctx.textBaseline='middle';//文本垂直方向，基线位置
            ctx.fillStyle = "#000";// 设置填充颜色
            var step = 2*Math.PI/10;//10分之1圆的弧度
            for ( var i = 0; i < 10; i++) {
                 ctx.save();
                 ctx.beginPath();
                 ctx.translate(centerX,centerY);//平移到圆心
                 ctx.rotate(i*step+step/2);//从时钟15点处开始旋转弧度i*step+step/2
                 ctx.fillText(info[i],125,0);
                 ctx.restore();
            }
        }

  3.绘制转盘指针
        function initPoint(){
            //直线加箭头
            ctx2.beginPath();//开始绘制
            ctx2.moveTo(0,2);//起始位置
            ctx2.lineTo(lineLen,2);//终点位置
            ctx2.lineTo(lineLen,4);
            ctx2.lineTo(lineLen+10,0);//箭头的长度
            ctx2.lineTo(lineLen,-4);
            ctx2.lineTo(lineLen,-2);
            ctx2.lineTo(0,-2);            
            ctx2.fillStyle = "#C01020";
            ctx2.fill();
            ctx2.closePath();
        }

4.旋转操作

//点击按钮开始旋转
        function doFly(){
            myCanvas2.width = 800;
            ctx2.translate(centerX,centerY);//平移到圆心
            if(t){
                return;
            }
             var step = 50 +Math.random()*10;
             var angle = 0;//旋转的角度
             t = setInterval(function(){
                step *= 0.95;
                if(step <= 0.1){
                    clearInterval(t);
                    t = null;
                    var pos = Math.floor(angle/36);//因为分成了10等分，旋转的角度除以36，可得到当前旋转的度数
                    alert(info[pos]);
                }else{
                    ctx2.restore();
                    ctx2.save();
                    ctx2.rotate(angle * Math.PI/180);//很关键，要旋转到上一次的角度，才能清掉上一次的指针
                    ctx2.clearRect(-5,-5, 170, 18);//先清，起始点已经平移到圆心，即圆心坐标为（0，0）
                    
                    angle+=step;
                       if(angle > 360){//如果旋转角度大于360度后，减去360
                          angle -=360;
                       }
                    ctx2.restore();
                    ctx2.save();
                    ctx2.rotate(angle * Math.PI/180);
                    initPoint();
                }
            },60);
        }

效果图：

源码下载：http://download.csdn.net/download/bewhatyouare/8435871