HTML5 canvas 圆盘抽奖

使用html5 canvas 绘制的圆盘抽奖程序
效果图：
贴上全部代码： 1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>圆盘抽奖</title>
  6 <style>
  7 *.{margin:0;padding:0;}
  8 
  9 #bg{position:absolute;left:200;top:200;}
 10 #container{width:400px;margin:150px auto;};
 11 
 12 </style>
 13 </head>
 14 <body>
 15 
 16 <div id="container">
 17 <canvas id='bg'></canvas>
 18 </div>
 19 
 20 
 21 </div>
 22 
 23 <script type="text/javascript">
 24 var fillStyle = ['rgb(255,154,0)','rgb(210,92,4)','rgb(255,154,0)','rgb(210,92,4)','rgb(255,154,0)','rgb(210,92,4)'] 
 25     ,fillText = ['一等奖','二等奖','三等奖','四等奖','五等奖','六等奖']
 26     ,width = 400
 27     ,height = 400
 28     ,c_x = 200
 29     ,c_y =200
 30     ,radius = 200 // 圆盘半径
 31     ,canvas = document.getElementById('bg')
 32     ,index =0
 33     ,timer = null
 34     ,running = false // 是否运行中
 35     ,speed = 300 // 速度
 36     ,isBeginPrize = false // 是否开始抽奖
 37     ,stepping=0 // 步数，经过一个扇形为1步
 38     ,basecircle = 3 // 点击开始时，圆盘旋转的圈数，旋转玩指定圈数之后，再根据selected的值确定奖项
 39     ,selected =4; // 最终选中第几个扇形，也就是确定几等奖
 40 function setup(){
 41     drawCircle(false);
 42 }
 43 function drawCircle(isRunning){
 44     var deg = Math.PI/180;
 45     var startAngle = 0;
 46     var endAngle = 60;
 47     canvas.height = height;
 48     canvas.width = width;
 49     var ctx=canvas.getContext('2d');
 50     for(var i=0;i<6;i++){
 51         ctx.beginPath();
 52         
 53         // 正在运行的时候，改变当前扇形的颜色
 54         if(isRunning && index==i)
 55         {
 56             ctx.fillStyle = 'rgb(255,248,51)';
 57         }
 58         else
 59         {
 60             ctx.fillStyle = fillStyle[i];
 61         }
 62         
 63         // 绘制扇形
 64         ctx.moveTo(c_x,c_y);
 65         ctx.arc(c_x,c_y,radius,deg*startAngle,deg*endAngle,false);
 66         ctx.fill();
 67         
 68         // 绘制扇形上的文字
 69         ctx.font="14px Microsoft YaHei";
 70         ctx.fillStyle = '#000';
 71         ctx.textAlign = "center";
 72         ctx.fillText(fillText[i],200+Math.cos(deg*(startAngle+30))*150,200+Math.sin(deg*(startAngle+30))*150);
 73         startAngle +=60;
 74         endAngle +=60;
 75     }
 76 
 77         
 78         // 绘制中心圆
 79         ctx.beginPath();
 80         ctx.arc(200,200,100,0,2*Math.PI,1);
 81         ctx.fillStyle = 'rgb(255,255,255)';
 82         ctx.fill();
 83     
 84         // 绘制中心圆
 85         ctx.font="30px Microsoft YaHei";
 86         // 创建渐变
 87         var gradient=ctx.createLinearGradient(0,0,width,0);
 88         gradient.addColorStop("0","magenta");
 89         gradient.addColorStop("0.2","blue");
 90         gradient.addColorStop("0.8","red");
 91         // 用渐变填色
 92         ctx.textAlign = "center";
 93         ctx.fillStyle=gradient;
 94         ctx.fillText("开始",200,200+10);    
 95         
 96         // 绘制中心园边框
 97         ctx.strokeStyle = 'rgb(148,28,27)';
 98         ctx.lineWidth = 6;
 99         ctx.stroke();
100 }
101 
102 
103 function rotate(){
104     if(stepping==4){ // 4步之后开始加速
105         clearTimer();
106         speed = 100;
107         timer = setInterval(rotate,speed);
108     }
109 
110     if(basecircle>0 && index ==6){ // 基本圈数借宿以后，开始随机抽奖
111         index = 0;
112         basecircle--;
113         if(basecircle == 0) // 开始随机抽奖
114         {
115             clearTimer();
116             speed = 300;
117             timer = setInterval(rotate,speed);        
118             isBeginPrize = true;            
119         }
120     }
121     
122     if(isBeginPrize && selected > 0) // 开始抽奖
123     {
124         if(--selected == 0) //到了选择的奖项之后
125         {
126             clearTimer();
127             isStop = true;
128         }
129         else
130         {
131             clearTimer();
132             speed += 100;
133             timer = setInterval(rotate,speed);
134         }
135         
136     }
137     
138     
139     drawCircle(true);
140     index++;
141     stepping++;
142 }
143 
144 // 初始化抽奖参数
145 function init()
146 {
147     basecircle = 3;
148     selected = 4;
149     
150     running= false;
151     isBeginPrize = false;
152     
153     index = 0;
154     stepping = 0;
155     speed = 300;
156     
157 }
158 
159 function mouseDown_Start(e){
160     
161     
162     
163     var local = getPointOnCanvas(canvas, e.pageX, e.pageY);
164 
165     if(local.x > 100 && local.x < 300 && local.y>100 && local.y<300) // 中心圆区域
166     {
167     
168         if(running){
169             return;
170         }
171         init();
172         
173         timer = setInterval(rotate,speed);
174     }
175 }
176 
177 
178 function clearTimer(){
179     clearInterval(timer);
180     timer = null;
181 }
182 
183 function getPointOnCanvas(canvas, x, y) {
184 
185     var bbox =canvas.getBoundingClientRect();
186 
187     return { x:x- bbox.left *(canvas.width / bbox.width),
188 
189             y:y - bbox.top  * (canvas.height / bbox.height)
190 
191             };
192 
193 }
194 
195 setup();
196 
197 canvas.addEventListener("mousedown",mouseDown_Start,false);
198 </script>
199 </body>

200 </html>