Canvas 图形变换

对图形进行移动、旋转、缩放、矩阵变换斜切。

图形移动

• 使用 ctx.translate(x, y) 实现图形位置的移动
• 实际上移动坐标系，而非图形

图形缩放

• 使用 ctx.scale(xRatio, yRatio) 实现图形缩放
• xRatio、yRatio，[0, 1] 缩小；>1，放大；负数为方向反转；
• 实际上是对坐标系缩放，而非图形
• ctx.scale(1, -1)，执行操作后，原 lineTo(100, 100）在第四象限，会变成在第一象限

图形旋转

• 使用 ctx.rotate(angle) 实现图形旋转
• angle，旋转弧度，3 点方向为 0 度
• 实际上是对坐标系旋转，而非图形

矩阵变换

canvas 没有斜切方法，可通过矩阵变换实现。矩阵变换可以实现所有图形变换。 矩阵变换，将原坐标按照一定的变换公式，变换成一个新的坐标。

• 使用 ctx.transform(a, b, c, d, e, f) 方法，传递转换矩阵，实现图形变换

/*
|x| |a c e| |x'|
|y|*|b d f|=|y'|
|1| |0 0 1| |1 |

x' = x*a + y*c + 1*e
y' = x*b + y*d + 1*f
1 = x*0 + y*0 + 1\*1
*/

• 矩阵移动，| a b c d e f | = | 1 0 0 1 e f |
• 矩阵缩放，| a b c d e f | = | a 0 0 d 0 0 |
• 矩阵旋转
  • 基于原位置旋转，而非基于 x 轴旋转（坐标系不会旋转）；
  • | a b c d e f | = | cos(angle) sin(angle) -sin(angle) cos(angle) 0 0 |
• 矩阵斜切
  • 沿 x 轴方向斜切，| a b c d e f | = | 1 0 tan(angle) 1 0 0 |
  • 沿 y 轴方向斜切，| a b c d e f | = | 1 tan(angle) 0 1 0 0 |

状态存储与重置

使用 ctx.save() 和 ctx.restore() 两个方法实现绘制状态的存储和重置。 绘制状态：

• 描边样式、填充样式
• 线条样式
• 文本样式
• 裁剪、合成、图形变换

每次调用 ctx.save() 方法，都会将之前设置的状态存储起来（存入栈中）；每次调用 ctx.restore() 方法，会将当前状态从栈中移除，恢复到上一次的状态。