选学

transform 任何一个变换其实都是矩阵实现的，我们知道，一个盒子都有一个坐标轴，那其实这个盒子上每一个点都有一个坐标，这里用向量其实更为贴切，transform 变换本质上就是把这个盒子上的所有点，从一个地方变换到另一个地方，当然这里的变换指的是线性变换。

这里解释一下是如何变换的。我们知道，transform 变换本质上变换的是坐标系，例如有一个点坐标为 (1,2)，那他变换后的坐标其实也是 (1,2)，但是由于坐标系本身变了，比如横坐标拉长为原来的两倍，那这个时候虽然它的坐标是 (1,2)，但实际的显示效果其实原来坐标系中 (2,2)这个点。

那如何实现这样的变换，就得依靠矩阵乘法。

首先，我们介绍基向量的概念，在直角坐标系中，(1,0)和 (0,1)就是一组基向量，用这两个基向量的线性组合可以表示平面上的任何一个点，实际上任何两个不平行的向量都可以用线性组合表示平面上任何一个点，所以我们可以认为，有了基向量就有了坐标系。我们现在知道两个基向量可以构成一个坐标系，一般来说，我们把第一个基向量记作 ，第二个基向量记作 ，在坐标系中，任给一点 ，表示的其实就是 ，比如我的基向量取 ，则在这个坐标系中，(5,3)这一点其实就是 ，其实基向量取 表示的坐标系就我们常见的直角坐标系，所以 (5,3)这一点的位置肯定是不会变的。接下来如果我取基向量为: ,同样是 (5,3)这个坐标，此时就变成了 ，可以看到，同样是 (5,3)这一点，我这次基向量选取不同，最终 (5,3)这一点所在的位置就落到了 (10,3)这一点，实际上这种操作就相当于 scaleX(2) 的操作。所以从本质上来说，transform 的一系列变换函数都是通过改变基向量来改变坐标系，从而达到改变图像的效果。

一般我们会把一组基向量表示为一个方阵，例如 (1,0) 和 (0,1)这一组基向量，就可以表示为以下矩阵

可以看到，其实就是把两个基向量竖着排列起来，构成一个类似方形的结构。如果选取 (2,0)和 (0,1)这一组基向量，就是以下矩阵

选取了基向量之后，我们就能形成一个坐标系，当我想要找到某一个坐标的位置，比如 (x, y)的位置，我就可以进行矩阵的乘法运算，如下所示

如果不做任何变换，默认就是以 (1,0)和 (0,1)作为基向量的，此时盒子中某一个点 (x, y)的坐标就是它本身的坐标。而如果要变换，那么盒子中某一个点的坐标就要在左边乘以这个变换矩阵，得到一个新坐标就是实际显示的位置。所以实际上 transform 的变换函数本质上就是一个矩阵，一个盒子上任何一点，经过这个矩阵变换之后就会跑到另一个点去，这就是 transform 的本质。

以上选取基向量的方式，我们称为线性变换，但如果读者对线性代数比较了解，会知道，平移并不属于线性变换，所以为了实现平移变换，我们会增添一行和一列。

如上图所示，此时我的坐标就是 ，这些常量都是我们为了实现一些效果添加了，不必在意。

matrix 函数参数一共有六个，就是这里的 a,b,c,d,e,f，按顺序填入即可，例如我填入 matrix(1,0,0,1,e,f)，此时相当于

可以看到，任意一点 ，经过这样一个变换之后，就变成了 ，这其实就是一个平移变换。

这里举个例子，例如我想要一个盒子沿着 y 轴镜像，也就是原来的点 (x, y)变换为 (-x, y)，我们根据矩阵计算规则

也就是要满足这样一个式子，即

很明显，这里 a 取-1，d 取 1，其他全取 0 即可，即

所以我们就可以用 matrix(-1,0,0,1,0,0) 来实现这样一个变换。