canvas轉盤抽獎

時間 2019-12-14
標籤 canvas 轉盤抽獎简体版
原文原文鏈接
 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>html5 canvas圓形轉盤抽獎特</title> 6 </head> 7 <body> 8 <div style="width:400px;margin:40px auto 0 auto;"> 9 <canvas id='bg'></canvas> 10 </div> 11 <script type="text/javascript"> 12 var fillStyle = 13 //['rgb(255,2,0)','rgb(246,150,30)','rgb(255,255,1)','rgb(154,205,52)','rgb(34,145,103)','rgb(30,156,144)','rgb(2,128,255)','rgb(53,52,154)','rgb(128,1,128)','rgb(200,23,131)'] 14 ['rgb(220,0,140)','rgb(250,210,50)','rgb(220,0,140)','rgb(250,210,50)','rgb(220,0,140)','rgb(250,210,50)','rgb(220,0,140)','rgb(250,210,50)','rgb(220,0,140)','rgb(250,210,50)'] 15 ,fillText = ['一等獎','二等獎','三等獎','四等獎','五等獎','六等獎','七等獎','八等獎','九等獎','十等獎'] 16 ,width = 400 17 ,height = 400 18 ,c_x = 200 19 ,c_y =200 20 ,radius = 180 // 圓盤半徑 21 ,canvas = document.getElementById('bg') 22 ,index =0 23 ,timer = null 24 ,running = false // 是否運行中 25 ,speed = 300 // 速度 26 ,isBeginPrize = false // 是否開始抽獎 27 ,stepping=0 // 步數，通過一個扇形爲1步 28 ,basecircle = 3 // 點擊開始時，圓盤旋轉的圈數，旋轉玩指定圈數以後，再根據selected的值肯定獎項 29 ,selected =0; // 最終選中第幾個扇形，也就是肯定幾等獎 30 31 function setup(){ 32 drawCircle(false); 33 } 34 35 function drawCircle(isRunning){ 36 var deg = Math.PI/300; 37 var startAngle = 0; 38 var endAngle = 58; 39 canvas.height = height; 40 canvas.width = width; 41 var ctx=canvas.getContext('2d'); 42 for(var i=0;i<10;i++){ 43 ctx.beginPath(); 44 // 正在運行的時候，改變當前扇形的顏色 45 if(isRunning && index==i) 46 { 47 ctx.fillStyle = 'rgb(255,0,0)'; 48 } 49 else 50 { 51 ctx.fillStyle = fillStyle[i]; 52 } 53 54 // 繪製扇形 55 ctx.moveTo(c_x,c_y); 56 ctx.arc(c_x,c_y,radius,deg*startAngle,deg*endAngle,false); 57 ctx.fill(); 58 59 // 繪製扇形上的文字 60 ctx.font="12px Microsoft YaHei"; 61 ctx.fillStyle = '#fff'; 62 ctx.textAlign = "center"; 63 ctx.fillText(fillText[i],200+Math.cos(deg*(startAngle+30))*150,200+Math.sin(deg*(startAngle+30))*150); 64 startAngle +=60; 65 endAngle +=60; 66 } 67 68 // 繪製中心圓 69 ctx.beginPath(); 70 ctx.arc(200,200,50,0,2*Math.PI,1); 71 ctx.fillStyle = 'rgb(255,255,255)'; 72 ctx.fill(); 73 // 繪製中心圓 74 ctx.font="15px Microsoft YaHei"; 75 // 建立漸變 76 var gradient=ctx.createLinearGradient(0,0,width,0); 77 gradient.addColorStop("0","magenta"); 78 gradient.addColorStop("0.2","blue"); 79 gradient.addColorStop("0.4","red"); 80 // 用漸變填色 81 ctx.textAlign = "center"; 82 ctx.fillStyle=gradient; 83 ctx.fillText("start",200,195+0); 84 ctx.fillText("當即抽獎",200,200+20); 85 // 繪製中心園邊框 86 ctx.strokeStyle = 'rgb(0,0,0)'; 87 ctx.lineWidth = 1; 88 ctx.stroke(); 89 } 90 91 function rotate(){ 92 if(stepping==5){ // 4步以後開始加速 93 clearTimer(); 94 speed = +100; 95 timer = setInterval(rotate,speed); 96 } 97 98 if(basecircle>0 && index ==10){ // 基本圈數結束之後，開始隨機抽獎 99 index = 0; 100 basecircle--; 101 if(basecircle == 0) // 開始隨機抽獎 102 { 103 clearTimer(); 104 speed = 300; 105 timer = setInterval(rotate,speed); 106 isBeginPrize = true; 107 } 108 } 109 110 if(isBeginPrize && selected > 0) // 開始抽獎 111 { 112 if(--selected == 0) //到了選擇的獎項以後 113 { 114 clearTimer(); 115 isStop = true; 116 } 117 else 118 { 119 clearTimer(); 120 speed += 100; 121 timer = setInterval(rotate,speed); 122 } 123 } 124 drawCircle(true); 125 index++; 126 stepping++; 127 } 128 129 // 初始化抽獎參數 130 function init() 131 { 132 basecircle = 5; 133 selected = (Math.floor(Math.random() * 10) + 1 );//輸出1-10的隨機數 134 running= false; 135 isBeginPrize = false; 136 index = index++; 137 stepping = 0; 138 speed = 300; 139 } 140 141 function mouseDown_Start(e){ 142 var local = getPointOnCanvas(canvas, e.pageX, e.pageY); 143 if(local.x > 100 && local.x < 300 && local.y>100 && local.y<300) // 中心圓區域 144 { 145 if(running){ 146 return; 147 } 148 init(); 149 timer = setInterval(rotate,speed); 150 } 151 } 152 153 function clearTimer(){ 154 clearInterval(timer); 155 timer = null; 156 } 157 158 function getPointOnCanvas(canvas, x, y) { 159 var bbox =canvas.getBoundingClientRect(); 160 return { x:x- bbox.left *(canvas.width / bbox.width), 161 y:y - bbox.top * (canvas.height / bbox.height) 162 }; 163 } 164 setup(); 165 canvas.addEventListener("mousedown",mouseDown_Start,false); 166 </script> 167 </div> 168 </body> 169 </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。