用canvas写的钟表小例子

最新推荐文章于 2022-05-11 19:24:55 发布

ace_TiAmo

最新推荐文章于 2022-05-11 19:24:55 发布

阅读量152

点赞数

分类专栏： js 文章标签： canvas

本文链接：https://blog.csdn.net/ace15824843202/article/details/84388141

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表盘</title>

</head>
<body>
<canvas id="cas" style="border:1px solid black" width="500" height="500">
</canvas>
</body>

</html>
<script>
  window.onload=function () {
      let cas=document.getElementById('cas').getContext('2d');

      function clock(){
          // 表盘
          cas.lineWidth=2;
          cas.font='16px arial';
          cas.strokeText('Bestdon',200,200);
          cas.stroke();
          cas.clearRect(0,0,500,500);
          cas.beginPath();
          cas.lineWidth=10;
          cas.arc(250,250,200,0,2*Math.PI);
          cas.closePath();
          cas.stroke();
        
            //字体
          cas.lineWidth=1;
          cas.font='20px arial';
          cas.strokeText('Bestdon',216,150);
          cas.stroke();


          //时针刻度
          for(var i =0 ;i<12;i++){
              cas.save();
              cas.beginPath();
              cas.translate(250,250);
              cas.rotate(Math.PI/6*i);
              cas.lineWidth=8;
              cas.moveTo(0,-200);
              cas.lineTo(0,-170);
              cas.stroke();
              cas.restore();
          }
          //分钟刻度
          for(var i =0 ;i<60;i++){
              cas.save();
              cas.beginPath();
              cas.translate(250,250);
              cas.rotate(Math.PI/30*i);
              cas.lineWidth=6;
              cas.moveTo(0,-200);
              cas.lineTo(0,-180);
              cas.stroke();
              cas.restore();
          }
            
            //    获取当地时间
          let date = new Date();
          let hours = date.getHours(),
              min = date.getMinutes(),
              sec = date.getSeconds();
          //console.log(hours);
          let hours12 = hours+min/60;
          //console.log(hours12);
          hours12=hours12>12?hours12-12:hours12;
          //console.log(hours12);

          //秒针
          cas.save();
          cas.beginPath();
          cas.translate(250,250);
          cas.rotate(sec*Math.PI/30);
          cas.lineWidth=1;
          cas.strokeStyle='red';
          cas.moveTo(0,10);
          cas.lineTo(0,-100);
          cas.stroke();
          cas.restore();
            
        //分针
          cas.save();
          cas.beginPath();
          cas.translate(250,250);
          cas.rotate(min*Math.PI/30);
          cas.lineWidth=2;
          cas.strokeStyle='blue';
          cas.moveTo(0,0);
          cas.lineTo(0,-80);
          cas.stroke();
          cas.restore();

         //时针
          cas.save();
          cas.beginPath();
          cas.translate(250,250);
          cas.rotate(hours12*(Math.PI/6));
          cas.lineWidth=4;
          cas.strokeStyle='black';
          cas.moveTo(0,0);
          cas.lineTo(0,-60);
          cas.stroke();
          cas.restore();

          cas.save();
          cas.beginPath();
          cas.translate(250,250);
          cas.lineWidth=1;
          cas.fillStyle='black';
          cas.arc(0,0,5,0,2*Math.PI);
          cas.fill();
          cas.restore();
      }
      clock();
      let autoPlay=null;
      clearInterval(autoPlay);
      autoPlay=setInterval(()=> {
          clock();
      },1000)


  }

</script>