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>
