Canvas上下文详解

Posted 2022-08-23 liangklfang

本部分重点讲解了 Canvas 中心点的内容，在 Canvas 中所有内容的绘制都是基于上下文变换后的新坐标系中心点来完成的，对于坐标系中心点的理解是正确完成内容绘制的前提。同时，本章节也将重点讲述 Canvas 绘图状态相关的两个方法 save 和 restore。

1.Canvas 与 CSS3 坐标变换

1.1 CSS3 matrix 2D 矩阵和 Canvas transform 2D 矩阵

2D 矩阵指的是元素在 2D 平面内发生诸如缩放、平移、旋转、拉伸四种变化，在 CSS3 中对应 4 个方法分别是 scale()、translate()、rotate()和 skew()，这 4 个方法是 CSS3 矩阵 matrix 的快捷方式，其本质都是由 matrix() 实现的。

类似地，在 Canvas 中与 CSS3 对应的 3 个方法分别是 scale()、translate()、rotate()，而 Canvas 对象没有 skew 方法，CSS3 中的矩阵和 Canvas 矩阵原理是相通的。matrix 方法有六个参数 matrix(a, b, c, d, x, y)，六个参数默认值是：

matrix(1, 0, 0, 1, 0, 0)

这六个参数分别控制不同的变换

a 水平缩放

b 水平拉伸

c 垂直拉伸