用canvas画时钟

最新推荐文章于 2023-07-26 16:00:48 发布

一名爱记录的程序媛

最新推荐文章于 2023-07-26 16:00:48 发布

阅读量722

点赞数

分类专栏： canvas 笔记文章标签：前端

本文链接：https://blog.csdn.net/qq_62449212/article/details/124250039

版权

笔记同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

canvas

2 篇文章 0 订阅

订阅专栏

用canvas实现时钟每秒钟旋转一次效果，效果图如下

时钟2

对应代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>时钟</title>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <style>
    div {
      text-align: center;
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <header>
  </header>
  <div>
    <canvas id="clock" width="500" height="500"></canvas>
  </div>
  <script>
    var dom = document.getElementById('clock');
    var ctx = dom.getContext('2d');
    var width = ctx.canvas.width;
    var height = ctx.canvas.height;
    var r = width / 2;
    var rem = width / 200;
    function drawBackground() {
      ctx.save();
      ctx.translate(r, r);
      ctx.beginPath();
      ctx.stroke();
      var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
      ctx.font = 18 * rem + 'px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      hourNumbers.forEach(function (number, i) {
        var rad = 2 * Math.PI / 12 * i;
        var x = Math.cos(rad) * (r - 40 * rem);
        var y = Math.sin(rad) * (r - 40 * rem);
        ctx.fillText(number, x, y);
      });
      for (var i = 0; i < 60; i++) {
        var rad = 2 * Math.PI / 60 * i;
        var x = Math.cos(rad) * (r - 18 * rem);
        var y = Math.sin(rad) * (r - 18 * rem);
        ctx.beginPath();
        if (i % 5 === 0) {
          ctx.lineWidth = 4 * rem;
          ctx.lineCap = "round";
          ctx.moveTo(x, y);
          ctx.lineTo(Math.cos(rad) * (r - 26 * rem), Math.sin(rad) * (r - 26 * rem)); //画出这条线
          ctx.stroke();
          ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false);
        } else {
          ctx.fillStyle = '#000';
          ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false);
        }
        ctx.fill()
      }
    }
    //画时针
    function drawHour(hour, minute) {
      ctx.save(); //保存当前环境的状态
      ctx.beginPath(); //画出竖着的那个时针的线
      var rad = 2 * Math.PI / 12 * hour; //时针旋转的弧度  每个小时的弧度
      var mrad = 2 * Math.PI / 12 / 60 * minute; //分针旋转的弧度
      ctx.rotate(rad + mrad);
      ctx.lineWidth = 4 * rem; //定义时针线的宽度
      ctx.lineCap = "round"; //设置时针线端点为圆的
      ctx.moveTo(0, 10 * rem); //移动划线的原点到圆点下面一点 
      ctx.lineTo(0, -r / 2); //画出这条线
      ctx.stroke(); //最终画出这条时针线
      ctx.restore(); //返回之前保存过的路径状态和属性
    }
    //画分针		
    function drawMinute(minute) {
      ctx.save(); //保存当前环境的状态
      ctx.beginPath(); //画出竖着的那个时针的线
      var rad = 2 * Math.PI / 60 * minute ; //需要旋转的弧度
      ctx.rotate(rad);
      ctx.lineWidth = 3 * rem; //定义分针线的宽度
      // ctx.lineCap = "round"; //设置时针线端点为圆的
      ctx.moveTo(0, 10 * rem); //移动划线的原点到圆点下面一点 
      ctx.lineTo(0, -r + 40 * rem); //画出这条线
      // ctx.lineTo(3,)
      ctx.stroke(); //最终画出这条时针线
      ctx.restore(); //返回之前保存过的路径状态和属性
    }
    // 画秒针	每秒旋转
    function drawSecond(second) {
      ctx.save(); //保存当前环境的状态
      ctx.beginPath(); //画出竖着的那个时针的线
      ctx.fillStyle = '#663300';
      var rad = 2 * Math.PI / 60 * second ; //秒针需要旋转的弧度
      ctx.rotate(rad);
      ctx.moveTo(-2 * rem, 20 * rem); //移动划线的原点到圆点下面一点 
      ctx.lineTo(2 * rem, 20 * rem);
      ctx.lineTo(1, -r + 25 * rem); //画出这条线
      ctx.lineTo(-1, -r + 18 * rem); //画出这条线
      ctx.fill(); //最终画出这条时针线
      ctx.restore(); //返回之前保存过的路径状态和属性
    }  
    function draw() {
      ctx.clearRect(0, 0, width, height)
      var now = new Date();
      var hour = now.getHours();
      var minute = now.getMinutes();
      var second = now.getSeconds();
      var millisecond = now.getMilliseconds();
      console.log(hour,minute,second)
      drawBackground();
      drawHour(hour, minute);
      drawMinute(minute);
      drawSecond(second);
      // drawMillisecond(millisecond,second);
      // console.log(millisecond);
      ctx.restore();
    }
    draw();
    setInterval(draw, 50);
  </script>
</body>

</html>