用矩阵计算替换线性方程

这里不讨论为什么要用矩阵计算代替线性方程。

在使用canvas写动画的时候会去计算点的坐标，比如说，要将一个点先沿x轴移动0.1px，沿y轴移动0.2px，在以（0，0）点旋转1deg。这是需要写出如下代码：

x += 0.1;
y += 0.2;
x = x * Math.cos(1 / 180 * Math.PI) + y * Math.sin(1 / 180 * Math.PI);
y = y * Math.cos(1 / 180 * Math.PI) + x * Math.sin(1 / 180 * Math.PI);

如何将这段代码转换为矩阵呢？首先了解一下一个三维矩阵的乘法运算是什么样的？

[A0, B0, C0]   [X]   [A0 * X + B0 * Y + C0 * Z]
[A1, B1, C1] * [Y] = [A1 * X + B1 * Y + C1 * Z]
[A2, B2, C2]   [Z]   [A2 * X + B2 * Y + C2 * Z]
转换为javaScript
Matrix3 = function(Matrix, place) {
  const arr = [];
  arr[0] = Matrix[0] * place[0] + Matrix[1] *  place[1] + Matrix[2] * place[2];
  arr[1] = Matrix[3] * place[0] + Matrix[4] *  place[1] + Matrix[5] * place[2];
  arr[2] = Matrix[6] * place[0] + Matrix[7] *  place[1] + Matrix[8] * place[2];
  return arr;
};

然后变换一下之前写过的代码

x = 1 * x + 0 * y + 0.1;
y = 0 * x + 1 * y + 0.2;
x = x * Math.cos(1 / 180 * Math.PI) + y * Math.sin(1 / 180 * Math.PI) + 0;
y = y * Math.cos(1 / 180 * Math.PI) + x * Math.sin(1 / 180 * Math.PI) + 0;

平移运算转化为矩阵

Matrix3([
  1, 0, 0.1,
  0, 1, 0.2,
  0, 0, 1,
], [x, y, 0]);

旋转运算转化为矩阵

Matrix3([
  Math.cos(1 / 180 * Math.PI), Math.sin(1 / 180 * Math.PI), 0,
  Math.sin(1 / 180 * Math.PI), Math.cos(1 / 180 * Math.PI), 0,
  0, 0, 1,
], [x, y, 0]);

总结上述代码有: <平移坐标> = <平移矩阵> * <原坐标>

<旋转坐标> = <旋转矩阵> * <平移坐标>

可以得出: <新坐标> = <平移矩阵> * <原坐标> * <旋转矩阵>

变换可得: <新坐标> = <平移矩阵> * <旋转矩阵> * <原坐标>

转化为js

Matrix3([
  Math.cos(1 / 180 * Math.PI), Math.sin(1 / 180 * Math.PI), 0,
  Math.sin(1 / 180 * Math.PI), Math.cos(1 / 180 * Math.PI), 0,
  0, 0, 1,
], Matrix3([
  1, 0, 0.1,
  0, 1, 0.2,
  0, 0, 1,
], [x, y, 0]));