深圳全飞鸿

标题: 转盘抽奖范例 [打印本页]
作者: zhgc    时间: 2022-8-19 23:01
标题: 转盘抽奖范例
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>

  7. <style type="text/css">
  8.    *{ padding:0; margin:0}
  9.    #can{ background:#F2F2F2}
  10. </style>

  12. <body>
  13.      <canvas id="can" width="800" height="800"></canvas>
  14. </body>

  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();

  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.             

  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. }


  118. </script>

  120. </html>
复制代码






欢迎光临 深圳全飞鸿 (http://www.nagomes.com/disc/) Powered by Discuz! X3.2