基础部分坐标系
画布坐标、屏幕坐标的概念
- 屏幕坐标,绝对坐标,类似于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上绘制太多图形会有性能问题,那么就分几个图层,每次仅重新绘制其中一个图层,每个图层的图形都不会很多,那么即使重绘的频率很高,也不会有性能问题。图层的概念图如下: