基础部分坐标系
画布坐标、屏幕坐标的概念
- 屏幕坐标，绝对坐标，类似于css中的绝对定位
- 画布坐标，类似于css中的相对定位，还要考虑缩放
几何变换：平移、缩放、旋转
- 平移，位置移动，形状、相对位置不变
- 缩放，位置（相对屏幕坐标）和大小都发生变化
- 旋转，位置旋转，形状、相对位置不变
canvas 中的所有几何变换针对的不是绘制的图形，而是针对画布本身，也就是说，当移动、缩放、旋转画布之后，新的坐标系只对新的操作生效
参考：
- Canvas 几何变换 - Canvas 基础教程 - 简单教程，简单编程
- Canvas 平移 translate() - Canvas 基础教程 - 简单教程，简单编程
- Canvas 缩放 scale() - Canvas 基础教程 - 简单教程，简单编程
- Canvas 旋转 rotate() - Canvas 基础教程 - 简单教程，简单编程
- 获取canvas对象
- 获取上下文环境对象context
- 开始绘制图形。
示例代码
const canvas = document.getElementById("canvas");
const context = convas.getContext("2d");
context.fillRect(100, 100, 50, 50);
通用绘图步骤
- 保存画布（状态），context.save();
- 画布操作，context.transform（叠加） 或者 context.setTransform（不叠加）
- 设置样式，绘制图形
- 恢复画布（状态），context.restore();
- 清空画布，context.clearRect
- 保存状态，context.save
- 画布操作，doTransform
- getShapeList and forEach
- 恢复状态，context.restore
Canvas的绘制和html的绘制是不一样的，html的绘制是增量的，当变化时，只会重新绘制变化的部分，没有变化的部分是不会重新绘制的，但是canvas不一样，每次都是全量绘制的，如果一个canvas里有很多图形，当改变一个图形时，需要重新绘制所有图形才可以（当然，可以用clearRect擦除部分区域，但一般很少这么用）。
了解canvas的绘制规则之后，就很容易发现性能问题，如果canvas上绘制了大量的图形（成千上万个），每次重绘就需要很长的时间，如果重绘的频率很高，那么就会有性能问题
那么如何解决这个问题呢，目前有以下几种方案
- 使用图层
- 使用临时图层
- 使用webworker或wasm
- 使用webgl
图层的概念来自于PS，每一个图层都是一个canvas，既然在一个canvas上绘制太多图形会有性能问题，那么就分几个图层，每次仅重新绘制其中一个图层，每个图层的图形都不会很多，那么即使重绘的频率很高，也不会有性能问题。图层的概念图如下：
