HTML5 canvas 圓盤抽獎

時間 2019-11-14
原文原文鏈接
使用html5 canvas 繪製的圓盤抽獎程序javascript
效果圖：html
貼上所有代碼： 1 <!DOCTYPE html>html5
 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>
相關標籤/搜索
jquery+html5+css3+canvas
html5+canvas+javascript
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。