前置知识

Canvas绘图都是通过JavaScript 去操控的，如要实现一些交互性动画是非常容易的。那Canvas是如何做动画的？

如需要执行动画，不得不对画布上所有图形进行一帧一帧的重绘（比如在1秒绘60帧就可绘出流畅的动画了）。

为了实现动画，我们需要一些可以定时执行重绘的方法。在Canvas中有三种方法可以实现：

setInterval
setTimeout
requestAnimationFrame（推荐）

定时器的缺陷

setInterval定时器不是非常精准的，因为setTimeout的回调函数是放到了延时队列中等待执行

如果微任务中一直有未处理完成的任务，那么setTimeout的回调函数就有可能不会在指定时间内触发回调。

requestAnimationFrame函数

告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用该函数的回调函数来更新动画。

该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

若想在浏览器下次重绘之前继续更新下一帧动画，那么在回调函数自身内必须再次调用 requestAnimationFrame()

绘制一帧的步骤:

用 clearRect(x,y,w,h)方法，清空 canvas
保存 canvas 状态
修改 canvas 状态（样式、移动坐标、旋转等）
绘制图形（即绘制动画中的一帧）
恢复 canvas 状态，准备重绘下一帧

开始绘画

准备一个canvas容器, 并设置样式

<div class="clock">
  <canvas id="tutorial" width="300" height="300">
    你的浏览器不兼容Canvas,请升级您的浏览器!
  </canvas>
</div>

  .clock {
    width: 300px;
    height: 300px;
    margin: 10px;
    background-color: black;
    border-radius: 50px;
  }
  canvas {
    background-color: rgba(255, 0, 0, 0.1);
  }

封装保存和恢复（Canvas）绘画状态的函数

function saveAndRestore(fn, ...args) {
  ctx.save();
  fn(...args);
  ctx.restore();
}

通过这个函数, 我们能使每一次绘画结束后, canvas都能恢复到初始状态

绘制背景

    function drawBackGround() {
      ctx.translate(150, 150);
      ctx.fillStyle = "white";
      ctx.beginPath();
      ctx.arc(0, 0, 130, 0, 2 * Math.PI);
      ctx.fill();
    }

填充一个半径为130的圆

绘制数字

这里用到了三角函数, 通过三角函数计算出每个数字的坐标

x= AB = cosa * AC => x = Math.cos(弧度) * R

y= BC = sina * AC => y = Math.sin(弧度) * R

弧度=( Math.PI / 180 ) * 角度

function drawNumber() {
  ctx.translate(150, 150);
  ctx.font = "30px fangsong";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  let numbers = [6, 5, 4, 3, 2, 1, 12, 11, 10, 9, 8, 7];
  for (let i = 0; i < numbers.length; i++) {
    let x = Math.sin((i * Math.PI) / 6) * 100;
    let y = Math.cos((i * Math.PI) / 6) * 100;
    ctx.fillText(numbers[i], x, y);
  }
}

绘制刻度

//绘制刻度 - 时
function drawHourScale() {
  ctx.translate(150, 150);
  for (let i = 0; i < 12; i++) {
    ctx.rotate((Math.PI * 2) / 12);
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.moveTo(0, -130);
    ctx.lineTo(0, -122);
    ctx.stroke();
  }
}

//绘制刻度 - 分/秒
function drawMinuteScale() {
  ctx.translate(150, 150);
  for (let i = 0; i < 60; i++) {
    ctx.rotate((Math.PI * 2) / 60);
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(0, -130);
    ctx.lineTo(0, -125);
    ctx.stroke();
  }
}

绘制表心

function drawCenter() {
  ctx.translate(150, 150);
  ctx.beginPath();
  ctx.arc(0, 0, 8, 0, Math.PI * 2);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(0, 0, 5, 0, Math.PI * 2);
  ctx.fillStyle = "gray";
  ctx.fill();
}

绘制时/分/秒针

传入时间参数, 转动不同的角度

//绘制时针
function drawHours(hours, minute, second) {
  ctx.translate(150, 150);
  ctx.rotate(
    ((Math.PI * 2) / 12) * hours +
      ((Math.PI * 2) / 12 / 60) * minute +
      ((Math.PI * 2) / 12 / 60 / 60) * second
  );
  ctx.lineWidth = 5;
  ctx.lineCap = "round";
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(0, -50);
  ctx.stroke();
}

//绘制分针
function drawMinute(minute, second) {
  ctx.translate(150, 150);
  ctx.rotate(
    ((Math.PI * 2) / 60) * minute + ((Math.PI * 2) / 60 / 60) * second
  );
  ctx.lineWidth = 3;
  ctx.lineCap = "round";
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(0, -70);
  ctx.stroke();
}

//绘制秒针
function drawSecond(second) {
  ctx.translate(150, 150);
  ctx.rotate(((Math.PI * 2) / 60) * second);
  ctx.strokeStyle = "red";
  ctx.lineWidth = 2;
  ctx.lineCap = "round";
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(0, -80);
  ctx.stroke();
}

调用各个函数

function draw() {
  ctx.save();
  let time = new Date();
  let hours = time.getHours();
  let minute = time.getMinutes();
  let second = time.getSeconds();
  ctx.clearRect(0, 0, 300, 300);

  saveAndRestore(drawBackGround);
  saveAndRestore(drawNumber);
  saveAndRestore(drawHours, hours, minute, second);
  saveAndRestore(drawMinute, minute, second);
  saveAndRestore(drawSecond, second);
  saveAndRestore(drawCenter);
  saveAndRestore(drawHourScale);
  saveAndRestore(drawMinuteScale);
  ctx.restore();
  requestAnimationFrame(draw);
}

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-image: url(../../images/grid.png);
      }
      canvas {
        background-color: rgba(255, 0, 0, 0.1);
      }
      .clock {
        width: 300px;
        height: 300px;
        margin: 10px;
        background-color: black;
        border-radius: 50px;
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <canvas id="tutorial" width="300" height="300">
        你的浏览器不兼容Canvas,请升级您的浏览器!
      </canvas>
    </div>
    <script>
      window.onload = function () {
        let canvasEl = document.getElementById("tutorial");
        if (!canvasEl.getContext) {
          return;
        }
        let ctx = canvasEl.getContext("2d"); // 2d | webgl

        function saveAndRestore(fn, ...args) {
          ctx.save();
          fn(...args);
          ctx.restore();
        }

        //绘制背景
        function drawBackGround() {
          ctx.translate(150, 150);
          ctx.fillStyle = "white";
          ctx.beginPath();
          ctx.arc(0, 0, 130, 0, 2 * Math.PI);
          ctx.fill();
        }

        //绘制数字
        function drawNumber() {
          ctx.translate(150, 150);
          ctx.font = "30px fangsong";
          ctx.textAlign = "center";
          ctx.textBaseline = "middle";
          let numbers = [6, 5, 4, 3, 2, 1, 12, 11, 10, 9, 8, 7];
          for (let i = 0; i < numbers.length; i++) {
            let x = Math.sin((i * Math.PI) / 6) * 100;
            let y = Math.cos((i * Math.PI) / 6) * 100;
            ctx.fillText(numbers[i], x, y);
          }
        }

        // 绘制时针;
        function drawHours(hours, minute, second) {
          ctx.translate(150, 150);
          ctx.rotate(
            ((Math.PI * 2) / 12) * hours +
              ((Math.PI * 2) / 12 / 60) * minute +
              ((Math.PI * 2) / 12 / 60 / 60) * second
          );
          ctx.lineWidth = 5;
          ctx.lineCap = "round";
          ctx.beginPath();
          ctx.moveTo(0, 0);
          ctx.lineTo(0, -50);
          ctx.stroke();
        }

        //绘制分针
        function drawMinute(minute, second) {
          ctx.translate(150, 150);
          ctx.rotate(
            ((Math.PI * 2) / 60) * minute + ((Math.PI * 2) / 60 / 60) * second
          );
          ctx.lineWidth = 3;
          ctx.lineCap = "round";
          ctx.beginPath();
          ctx.moveTo(0, 0);
          ctx.lineTo(0, -70);
          ctx.stroke();
        }

        //绘制秒针
        function drawSecond(second) {
          ctx.translate(150, 150);
          ctx.rotate(((Math.PI * 2) / 60) * second);
          ctx.strokeStyle = "red";
          ctx.lineWidth = 2;
          ctx.lineCap = "round";
          ctx.beginPath();
          ctx.moveTo(0, 0);
          ctx.lineTo(0, -80);
          ctx.stroke();
        }

        //绘制圆心
        function drawCenter() {
          ctx.translate(150, 150);
          ctx.beginPath();
          ctx.arc(0, 0, 8, 0, Math.PI * 2);
          ctx.fill();
          ctx.beginPath();
          ctx.arc(0, 0, 5, 0, Math.PI * 2);
          ctx.fillStyle = "gray";
          ctx.fill();
        }

        //绘制刻度 - 时
        function drawHourScale() {
          ctx.translate(150, 150);
          for (let i = 0; i < 12; i++) {
            ctx.rotate((Math.PI * 2) / 12);
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.moveTo(0, -130);
            ctx.lineTo(0, -122);
            ctx.stroke();
          }
        }

        //绘制刻度 - 分/秒
        function drawMinuteScale() {
          ctx.translate(150, 150);
          for (let i = 0; i < 60; i++) {
            ctx.rotate((Math.PI * 2) / 60);
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(0, -130);
            ctx.lineTo(0, -125);
            ctx.stroke();
          }
        }

        function draw() {
          ctx.save();
          let time = new Date();
          let hours = time.getHours();
          let minute = time.getMinutes();
          let second = time.getSeconds();
          ctx.clearRect(0, 0, 300, 300);

          saveAndRestore(drawBackGround);
          saveAndRestore(drawNumber);
          saveAndRestore(drawHours, hours, minute, second);
          saveAndRestore(drawMinute, minute, second);
          saveAndRestore(drawSecond, second);
          saveAndRestore(drawCenter);
          saveAndRestore(drawHourScale);
          saveAndRestore(drawMinuteScale);
          ctx.restore();
          requestAnimationFrame(draw);
        }
        requestAnimationFrame(draw);
      };
    </script>
  </body>
</html>

使用Canvas画一个时钟