使用HTML5Canvas绘制实时动态时钟-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51558433/article/details/128675084
使用canvas写一个时钟

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .clock {
        width: 300px;
        height: 300px;
        margin: 20px;
        border-radius: 50px;
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <canvas id="tutorial" width="300" height="300"></canvas>
    </div>
    <script>
      const canvasEl = document.querySelector("#tutorial");
      const ctx = canvasEl.getContext("2d");

      requestAnimationFrame(draw);

      function draw() {
        ctx.save();
        ctx.clearRect(0, 0, 300, 300);

        // 背景
        drawBg();
        // 绘制时钟数字
        drawNumbers();

        const time = new Date();
        const h = time.getHours();
        const m = time.getMinutes();
        const s = time.getSeconds();
        const ms = time.getMilliseconds();
        const l = 2 * Math.PI;
        let hl, ml, sl;

        // 绘制时针
        drawHours(h, m, s, hl, ml, sl, l);

        // 绘制分针
        drawMinutes(m, s, ml, sl, l);
        // 绘制秒针
        drawSecodes(s, ms, sl, l);
        // 绘制圆心
        drawCircle(l);

        // 时针刻度
        drawHoursScale();

        // 分针刻度
        drawMinutessScale();

        ctx.restore();
        requestAnimationFrame(draw);
      }

      function drawBg() {
        ctx.save();
        ctx.translate(150, 150);
        ctx.beginPath();
        ctx.arc(0, 0, 120, 0, 2 * Math.PI);
        ctx.fillStyle = "white";
        ctx.fill();
        ctx.restore();
      }

      function drawNumbers() {
        const numArr = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];

        ctx.save();
        ctx.translate(150, 150);
        ctx.font = "20px YAHEI";
        ctx.textBaseline = "middle";
        ctx.textAlign = "center";

        // sina = y
        // cosa = x
        // a要转成弧度
        // 将圆分成12等分，每小时占一份

        for (let i = 0; i < numArr.length; i++) {
          let rad = ((2 * Math.PI) / 12) * i;
          let x = Math.cos(rad) * 95;
          let y = Math.sin(rad) * 95;
          ctx.fillText(numArr[i], x, y);
        }

        ctx.restore();
      }

      function drawHours(h, m, s, hl, ml, sl, l) {
        hl = l / 12; //一小时的弧度
        ml = l / 12 / 60; //一分钟的弧度
        sl = l / 12 / 60 / 60; //一秒钟的弧度

        ctx.save();
        ctx.translate(150, 150);
        ctx.rotate(hl * h + ml * m + sl * s);

        ctx.lineWidth = "6";
        ctx.lineCap = "round";

        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -50);

        ctx.stroke();
        ctx.closePath();
        ctx.restore();
      }

      function drawMinutes(m, s, ml, sl, l) {
        ml = l / 60;
        sl = l / 60 / 60;

        ctx.save();
        ctx.translate(150, 150);
        ctx.rotate(ml * m + sl * s);

        ctx.lineWidth = "3";
        ctx.lineCap = "round";

        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -70);

        ctx.stroke();
        ctx.closePath();
        ctx.restore();
      }

      function drawSecodes(s, ms, sl, l) {
        sl = l / 60;
        let msl = l / 60 / 1000;

        ctx.save();
        ctx.translate(150, 150);
        ctx.rotate(sl * s + msl * ms);

        ctx.lineWidth = "2";
        ctx.lineCap = "round";
        ctx.strokeStyle = "red";

        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -80);

        ctx.stroke();
        ctx.closePath();
        ctx.restore();
      }

      function drawCircle(l) {
        ctx.save();
        ctx.translate(150, 150);
        ctx.beginPath();
        ctx.arc(0, 0, 8, 0, l);
        ctx.fill();

        ctx.beginPath();
        ctx.fillStyle = "gray";
        ctx.arc(0, 0, 4, 0, l);
        ctx.fill();
        ctx.restore();
      }

      function drawHoursScale() {
        ctx.save();
        ctx.translate(150, 150);
        for (let i = 0; i < 12; i++) {
          ctx.rotate((Math.PI * 2) / 12);
          ctx.beginPath();
          ctx.lineWidth = "4";
          // ctx.strokeStyle = "#68cce3";
          ctx.moveTo(0, -120);
          ctx.lineTo(0, -111);
          ctx.stroke();
          ctx.closePath();
        }
        ctx.restore();
      }

      function drawMinutessScale() {
        ctx.save();
        ctx.translate(150, 150);
        for (let i = 0; i < 60; i++) {
          ctx.rotate((Math.PI * 2) / 60);
          ctx.beginPath();
          ctx.lineWidth = "2";
          // ctx.strokeStyle = "#dda054";
          ctx.moveTo(0, -120);
          ctx.lineTo(0, -115);
          ctx.stroke();
          ctx.closePath();
        }
        ctx.restore();
      }
    </script>
  </body>
</html>