canvas绘制时钟

最新推荐文章于 2023-10-26 08:47:56 发布

DreamToSetSail

最新推荐文章于 2023-10-26 08:47:56 发布

阅读量563

点赞数

本文链接：https://blog.youkuaiyun.com/u011933615/article/details/21325505

版权

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>时钟</title>
  </head>
  <body>
    <canvas id="canvas" width="600px" height="600px" style="border:1px dashed green"></canvas>
  </body>
  <script>
    var cnavas=document.getElementById('canvas');
    var cxt=canvas.getContext('2d');
    function clock(){
                //清空画布
       cxt.clearRect(0,0,canvas.width,canvas.height);
                //获得当前时间
       var date=new Date();
       var hour = date.getHours();
       var minute = date.getMinutes();
       var second = date.getSeconds();
       hour=hour>12?hour-12:hour;
       //绘制表盘
       cxt.beginPath();//开启新路径
       cxt.arc(300,200,150,Math.PI*2,0,true);
       cxt.lineWidth=10; //行宽
       cxt.strokeStyle='red';//描绘样式
       cxt.stroke();//画笔
       cxt.closePath();//关闭新路径
       //时针刻度
       for(var i=0;i<12;i++){
         cxt.save();//保存当前的图层(方便将来裁剪、缩放、旋转等)
         cxt.beginPath();
         cxt.translate(300,200);//设置原点（0,0）
         cxt.rotate(Math.PI*2/12*i);//旋转
         cxt.moveTo(0,-145);//起始点
         cxt.lineTo(0,-130);//结束点
         cxt.strokeStyle='#000';
         cxt.lineWidth=8;
         cxt.stroke();
         cxt.closePath();
         cxt.restore();//将原来的图层恢复，将当前的图层保存进去
       }
       //分针刻度
       for(var i=0;i<60;i++){
         cxt.save();
         cxt.beginPath();
         cxt.translate(300,200);//设置原点（0,0）
         cxt.rotate(Math.PI*2/60*i);//旋转
         cxt.moveTo(0,-145);
         cxt.lineTo(0,-135);
         cxt.strokeStyle='#ccc';
         cxt.lineWidth=6;
         cxt.stroke();
         cxt.closePath();
         cxt.restore();
       }
      //时针
      cxt.save();
      cxt.beginPath();
      cxt.translate(300,200);
      cxt.rotate(Math.PI*2/12*hour);//旋转
      cxt.moveTo(0,0);
      cxt.lineTo(0,-100);
      cxt.strokeStyle='#000';
      cxt.lineWidth=8;
      cxt.stroke();
      cxt.closePath();
      cxt.restore();
      //分针
      cxt.save();
      cxt.beginPath();
      cxt.translate(300,200);
      cxt.rotate(Math.PI*2/60*minute);//旋转
      cxt.moveTo(0,0);
      cxt.lineTo(0,-110);
      cxt.strokeStyle='blue';
      cxt.lineWidth=6;
      cxt.stroke();
      cxt.closePath();
      cxt.restore();
      //秒针
      cxt.save();
      cxt.beginPath();
      cxt.translate(300,200);
      cxt.rotate(Math.PI*2/60*second);//旋转
      cxt.moveTo(0,0);
      cxt.lineTo(0,-120);
      cxt.strokeStyle='red';
      cxt.lineWidth=4;
      cxt.stroke();
      cxt.closePath();
      cxt.restore();
      //表柱
      cxt.save();
      cxt.translate(300,200);
      cxt.arc(0,0,10,Math.PI*2,0,true);
      cxt.fill();
      cxt.restore();
   }
   clock();
   setInterval(clock,1000);
  </script>
</html>