矩阵变换玩转 Canvas

矩阵变换是基于矩阵数学而进行的一类图形变换。而矩阵是一种由数字构成的方阵，在 Canvas 中，一个矩阵由 6 个数字来确定：

[a, b, c, d, e, f]

• a 确定 x 轴向的水平缩放
• b 确定 y 轴向的水平旋转
• c 确定 x 轴向的垂直旋转
• d 确定 y 轴向的垂直缩放
• e 确定 x 轴向的水平平移
• f 确定 y 轴向的垂直平移

Canvas 中的矩阵变换

在 Canvas 中，使用 ctx.transform() 方法可以进行矩阵变换。ctx.transform() 方法接受 6 个实参，依次对应于上述矩阵中的 6 个数字：

ctx.transform(a, b, c, d, e, f)

调用 ctx.transform() 方法后，会将一个新矩阵与 Canvas 当前的变换矩阵相乘，形成一个复合变换矩阵。这个复合变换矩阵将被用于后续的绘制和变换。

矩阵变换示例

下面是 Canvas 中几种常见的矩阵变换示例：

• 平移变换：ctx.transform(1, 0, 0, 1, x, y)，将图形沿 x 轴平移 x 个单位，沿 y 轴平移 y 个单位。
• 旋转变换：ctx.transform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), 0, 0)，将图形绕指定点旋转 angle 角度。
• 缩放变换：ctx.transform(sx, 0, 0, sy, 0, 0)，将图形沿 x 轴缩放 sx 倍，沿 y 轴缩放 sy 倍。
• 镜像变换：ctx.transform(-1, 0, 0, 1, 0, 0)，将图形沿 x 轴进行镜像变换。

复合变换

矩阵变换可以被组合起来形成复合变换。比如，要将图形平移、旋转和缩放，可以使用如下变换矩阵：

[a1, b1, c1, d1, e1, f1]  x  [a2, b2, c2, d2, e2, f2]  =  [a1*a2+c1*e2, b1*a2+d1*e2, a1*c2+c1*f2, b1*c2+d1*f2, a1*e2+e1, b1*e2+f1]

总结

掌握矩阵变换是 Canvas 图形编程中的一项核心技能。熟练掌握矩阵变换，可以让你更灵活地操控 Canvas 中的图形，创造出更复杂和生动丰富的视觉特效。