canvas实例--钟表

1. 初始化：将圆心调整到画布中间

   由于canvas中画圆与旋转所参照的坐标轴系于正常坐标系有出入

将整个画布逆时针旋转90°

 

 初始化一些样式数据：

　　ctx.lineWidth=8;
　　ctx.strokeStyle="black";
　　ctx.lineCap="round";

 2. 外层空心圆盘

圆盘颜色：#325FA2；圆盘宽度：4；圆盘半径：140；

3. 时针刻度

长度为20；宽度为8；外层空心圆盘与时针刻度之间的距离为20

4. 分钟刻度

宽度：4；长度：3；

5. 时针：宽度：14；圆心外溢出80收20

6. 分针：宽度：10；圆心外溢出112收28

7. 秒针：颜色：D40000；宽度：6；圆心外溢出83收30

8. 中心实心圆盘，半径为10；

秒针头：96码开外半径为10的空心圆，宽度：6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height: 100%;
            overflow: hidden;
            background-color: white;
        }
#clock{
background-color: #616161;
    position: absolute;
    left:50%;
    top:50%;
  transform: translate3d(-50%,-50%,0);
    margin:auto;
}
    </style>
</head>
<body>
<canvas id="clock" height="400"width="400">
    <span>您的浏览器不支持canvas</span>
</canvas>
</body>
</html>
<script>
  var canvas=document.querySelector('#clock');
  if(canvas.getContext){
      var ctx=canvas.getContext("2d");

      //将半自动的表变成动态的，加上定时器
      setInterval(function () {
          //清除，必须在原点未移动之前清除，要不然清除不掉
          ctx.clearRect(0,0,clock.width,clock.height);
          move();
      },1000);
      function move(){
          ctx.save();
          ctx.lineWidth=8;
          ctx.strokeStyle="black";
          ctx.lineCap="round";
          ctx.translate(200,200);
          ctx.rotate(-90*Math.PI/180);
          ctx.beginPath();

//外层表盘
          ctx.save();
          ctx.strokeStyle="#325FA2";
          ctx.lineWidth=14;
          ctx.beginPath();
          ctx.arc(0,0,140,0,360*Math.PI/180);
          ctx.stroke();
          ctx.restore();

          //时针刻度
          ctx.save();
          for(var i=0;i<12;i++){
              //若加上save和restore就不会出现累加现象，就会清除，所以不能写在里面；
              ctx.rotate(30*Math.PI/180);
              ctx.beginPath();
              ctx.moveTo(100,0);
              ctx.lineTo(120,0);
              ctx.stroke();
          }
          ctx.restore();

          //分针刻度
          ctx.save();
          ctx.lineWidth=4;
          for(var j=0;j<60;j++){
              //若加上save和restore就不会出现累加现象，就会清除，所以不能写在里面；
              ctx.rotate(6*Math.PI/180);
              if(i%5!==0){
                  ctx.beginPath();
                  ctx.moveTo(117,0);
                  ctx.lineTo(120,0);
                  ctx.stroke();
              }
          }
          ctx.restore();

// 时针，分针，秒针
          var date=new Date();
          var s=date.getSeconds();
          var m=date.getMinutes()+s/60;
          var h=date.getHours()+m/60;
          h=h>12?h-12:h;

          //时针
          ctx.save();
          ctx.lineWidth=14;
          ctx.beginPath();
          ctx.rotate(h*30*Math.PI/180);
          ctx.moveTo(-20,0);
          ctx.lineTo(80,0);
          ctx.stroke();
          ctx.restore();

//分针
          ctx.save();
          ctx.lineWidth=10;
          ctx.beginPath();
          ctx.rotate(m*6*Math.PI/180);
          ctx.moveTo(-28,0);
          ctx.lineTo(112,0);
          ctx.stroke();
          ctx.restore();

          //秒针
          ctx.save();
          ctx.lineWidth=6;
          ctx.strokeStyle="#D40000";
          ctx.fillStyle='#D40000';
          ctx.rotate(s*6*Math.PI/180);
          ctx.beginPath();
          ctx.moveTo(-30,0);
          ctx.lineTo(83,0);
          ctx.stroke();
          //表座
          ctx.beginPath();
          ctx.arc(0,0,10,0,360*Math.PI/180);
          ctx.fill();
          //秒头
          ctx.beginPath();
          ctx.arc(96,0,10,0,360*Math.PI/180);
          ctx.stroke();
          ctx.restore();
          ctx.restore();
      }
}
</script>
posted @ 2020-08-18 15:35  花未眠0619  阅读(163)  评论(0)    收藏  举报