canvas画出一个时钟

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           #box{
               height: 500px;
               width: 500px;
               margin: 50px auto;
           }
           #cav{
               border: 1px solid red;
           }

       </style>
   </head>
   <body>

       <div id="box">
           <canvas id="cav" width="500" height="400"></canvas>
       </div>
   </body>
   <script type="text/javascript">
       var cav = document.getElementById("cav");
       var hb = cav.getContext("2d")

       function biao(){



       //外层圆
       hb.beginPath();
       hb.arc(200,200,150,0,2*Math.PI,true)
       hb.lineWidth=3
       hb.stroke()
       hb.strokeStyle="blue"
       hb.closePath()

       //秒刻度
       hb.beginPath();
       hb.lineWidth=2;
       for(var i=0;i<60;i++){
           hb.moveTo(200,200);
           hb.arc(200,200,150,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false)
       }

       hb.strokeStyle="#000000"
       hb.stroke()
       hb.closePath()
       //覆盖圆
       hb.beginPath();
       hb.lineWidth=5
       hb.arc(200,200,142,0,2*Math.PI,false)
       hb.fillStyle="#FFF"
       hb.fill()
       hb.closePath()

       //时刻度
       hb.beginPath();
       hb.lineWidth=2
       for(var s=0;s<60;s++){
           hb.moveTo(200,200);
           hb.arc(200,200,150,30*s*Math.PI/180,30*(s+1)*Math.PI/180,false)
       }
       hb.stroke()
       hb.strokeStyle="blue"
       hb.closePath()
       //时刻度的覆盖圆
       hb.beginPath()
       hb.lineWidth=2
       hb.arc(200,200,135,0,2*Math.PI,false)
       hb.fillStyle="#fff"
       hb.fill()
       hb.closePath()



       //表的数字

       hb.beginPath();
       hb.fillStyle="#008000";
       hb.font="bold 20px 宋体";
       hb.fillText("1",255,100);
       hb.fillText("2",305,140);
       hb.fillText("3",320,208);
       hb.fillText("4",305,270);
       hb.fillText("5",255,315);
       hb.fillText("6",195,330);
       hb.fillText("7",130,315);
       hb.fillText("8",90,270);
       hb.fillText("9",70,207);
       hb.fillText("10",87,143);
       hb.fillText("11",130,100);
       hb.fillText("12",190,85);
   //获取当前时间
       var oData= new Date()
       var shi = oData.getHours();
       var fen = oData.getMinutes();
       var miao = oData.getSeconds();
       //-90 是在画圆后 0,0 直接指向 3 的位置 -90是让指针从12的位置开始
       var h = (-90+shi*30+fen/2)*Math.PI/180;
       var f = (-90+fen*6)*Math.PI/180;
       var s = (-90+miao*6)*Math.PI/180;

       //时针
       hb.beginPath();
       hb.lineWidth=5
       hb.moveTo(200,200)
       hb.arc(200,200,70,h,h,false)
       hb.strokeStyle="yellow";
       hb.stroke()
       hb.closePath()

       //分针
       hb.beginPath();
       hb.lineWidth=3
       hb.moveTo(200,200)
       hb.arc(200,200,90,f,f,false)
       hb.strokeStyle="#21B384";
       hb.stroke()
       hb.closePath()
       //秒针
       hb.beginPath();
       hb.lineWidth=1
       hb.moveTo(200,200)
       hb.arc(200,200,110,s,s,false)
       hb.strokeStyle="#337AB7";
       hb.stroke()
       hb.closePath()

       //表的表心
       hb.beginPath()
       hb.moveTo(200,200)
       hb.arc(200,200,5,0,2*Math.PI,false)
       hb.fillStyle="#004A7D"
       hb.fill()
       hb.closePath()

       }
       biao();
       setInterval(biao,1000)

   </script>
</html>

canvas画出一个时钟

猜你喜欢