html5学习-抽奖转盘

今天奉上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>

 

posted @ 2013-11-12 17:08  梦飞无颜  阅读(1065)  评论(0)  编辑  收藏  举报