使用canvas实现图形旋转canvas的旋转rotate、缩放scale、移动translate，都是对整个坐标系进行

canvas是h5的一个标签，提供了丰富的绘图功能，可以绘制2d图形，通过webgl也可以绘制3d图形。

canvas绘制2d图形不同于 svg，canvas只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段）。所有其他类型的图形都是通过一条或者多条路径组合而成的，可以使用路径生成的方法绘制复杂图形。

canvas并没有提供单个图形的旋转、缩放和移动的方法，canvas的旋转rotate、缩放scale、移动translate，都是对整个坐标系进行的。结合canvas的save方法和restore方法，可以实现对单个图形的旋转，代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="rotate()">rotate</button>
    <canvas
      id="canvas"
      width="500"
      height="500"
      style="border: 1px solid #aaa"
      ></canvas>
    <script lang="ts">
      const dom = document.getElementById("canvas");
      const ctx = dom.getContext("2d");
      ctx.fillRect(25, 25, 100, 100);

      ctx.beginPath();
      ctx.moveTo(150, 50);
      ctx.lineTo(200, 100);
      ctx.lineTo(130, 150);
      ctx.fill();
      let angle = 0;
      function rotate() {
        ctx.clearRect(0, 0, 500, 500);
        ctx.beginPath();
        ctx.moveTo(150, 50);
        ctx.lineTo(200, 100);
        ctx.lineTo(130, 150);
        ctx.fill();
        ctx.save();
        angle += 10;
        ctx.translate(75, 75);
        ctx.rotate((Math.PI * angle) / 180);
        ctx.fillRect(-50, -50, 100, 100);
        ctx.restore();
      }
    </script>
  </body>
</html>

在demo中，使用按钮进行旋转函数触发，每次函数执行时，先清空画布，保存一下绘制上下文context的初始状态，然后将坐标系原点移动到旋转图形的中心位置，然后旋转坐标系，再绘制图形(要将图形的中心点，绘制到坐标系的原点为止)，然后restore，返回到初始状态，这样就实现了图形的绕中心旋转。

在坐标系变换的时候，之前绘制好的图形，是不受坐标系变换影响的。这个是实现对单个图形进行操作的关键。