今天奉上html5学习的文字操作：抽奖转盘
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 7 <style type="text/css"> 8 *{ padding:0; margin:0} 9 #can{ background:#F2F2F2} 10 </style> 11 12 <body> 13 <canvas id="can" width="800" height="800"></canvas> 14 </body> 15 16 <script> 17 zpFun(); 18 function zpFun(){ 19 20 21 var canid=document.getElementById("can"); 22 var cans=canid.getContext("2d"); 23 var deg=Math.PI/180; 24 var colorArr=["#6D7278","#B55610","#349933","#CC3333","#2C3144","#B12E3D","#FFE44C","#41547F"]; 25 var textArr=["javascript","photoshop","css3","html5","mysql","php","java","dreamweaver"]; 26 var arg=0; 27 var step=50+50*Math.random(); 28 29 cans.translate(300,350); 30 //cans.strokeStyle="#000000"; 31 32 var t=setInterval(function(){ 33 34 step*=0.95; 35 36 if(step<=0.2){ 37 38 clearInterval(t); 39 var snum=Math.ceil(arg/45); 40 var con=textArr[textArr.length-snum]; 41 42 43 //cans.beginPath(); 44 //cans.font="14px 微软雅黑"; 45 //cans.textAlign="center"; 46 //cans.fillText(textArr[textArr.length-snum],0,0); 47 cans.font="20px Arial"; 48 cans.fillStyle="#cc0000"; 49 cans.textAlign="center"; 50 cans.fillText(con,0,0); 51 return; 52 53 }else{ 54 55 if(arg>=360){ 56 57 arg=0; 58 59 } 60 61 62 } 63 64 65 arg=arg+step; 66 67 cans.clearRect(-500,-500,1300,1300); 68 //画指针 69 cans.beginPath(); 70 cans.lineWidth=10; 71 cans.moveTo(230,0); 72 cans.lineTo(300,0); 73 cans.stroke(); 74 75 76 77 // //画扇形 78 79 cans.save(); 80 cans.rotate(arg*deg); 81 cans.lineWidth=1; 82 83 84 for(var i=0;i<8;i++){ 85 cans.beginPath(); 86 cans.fillStyle=colorArr[i]; 87 cans.moveTo(0,0); 88 cans.arc(0,0,200,i*45*deg,(i+1)*45*deg); 89 cans.closePath(); 90 cans.fill(); 91 cans.stroke(); 92 } 93 // //画中心园 94 cans.beginPath(); 95 cans.fillStyle="#ffffff"; 96 cans.arc(0,0,50,0,360*deg); 97 cans.fill(); 98 99 //写文字 100 for(var i=0;i<8;i++){ 101 cans.save(); 102 cans.beginPath(); 103 cans.rotate((i*45+25)*deg); 104 cans.font="20px Arial"; 105 cans.fillText(textArr[i],70,0); 106 cans.restore(); 107 108 } 109 cans.restore(); 110 111 },60); 112 113 114 115 } 116 117 118 </script> 119 120 </html>