图形变换与矩阵相乘

看懂这篇文章需要会矩阵相乘的运算，以及矩阵相乘在图形学里的意义。大学线性代数这门课，学过矩阵的乘法，没有学过也没事，也能体会得到。我在文章里提供了 codepen 的示例，可以清晰的了解到。

平移矩阵

一个矩阵，我们都用 JavaScript 的一个数组来表示：

let matrix = [
  1, 0, 0,
  0, 1, 0,
  tx, ty, 1
]

对于一个坐标为 [x, y, 1] 的点，和这个矩阵相乘后为 [x + tx, y + ty, 1] 。

缩放矩阵

let matrix = [
  sx, 0, 0,
  0, sy, 0,
  0, 0, 1
]

相乘结果为 [x * sx, x * sy, 1]。

旋转矩阵

let matrix = [
  cosa, sina, 0,
  -sina, cosa, 0,
  0, 0, 1
]

旋转的角度为 a，相乘就是 [x * cosa + y * -sina, x * sina + y * cosa, 1] 。

skew 矩阵

let matrix = [
  1, skewY, 0, 
  skewX, 1, 0, 
  0, 0, 1
]

其中的 skewX、skewY 值是角度的正切 tan 值。相乘就是 [x + skewX * y, skewY * x + y, 1]。怎么理解这种变形的几何意义呢？假设只在 x 轴方向应用 skew，那么就是将所有的 x 的坐标值加上 y 乘以 skewX 的值，在 x 轴上的坐标值就会变大或者变小，看起来拉伸起来了。同理，对 y 轴的效果也是一样。

codepen

See the Pen 旋转矩阵 by zeng (@zengxiaoluan) on CodePen.

扩展阅读

• 矩阵运算——平移，旋转，缩放