Canvas中的scale与translate详解

Posted 2022-08-24 liangklfang

矩阵变换是图形绘制中很重要的一个概念，本章节主要对矩阵变换中的 scale、translate 方法 进行详细的剖析，同时阐述了对 Canvas 进行 scale 操作时候会有相应的副作用产生，对于这种副作用我们又该如何避免。

1.Canvas 上下文变换矩阵表示

在上一个章节《Canvas 上下文详解》中讲述过，Canvas 上下文变换可以通过矩阵 matrix 来描述，matrix 的矩阵变换遵循下面的标准。其中 scaleX/Y 表示水平/垂直方向的缩放、skewX/skewY 表示水平/垂直方向的错切、translateX/Y 表示水平垂直方向的平移。具体表示规则如下：

matrix( scaleX, skewY, skewX, scaleY, translateX, translateY )

在 Canvas 绘图的时候，如果没有指定任何上下文变换，那么默认的上下文变换规则就是单位矩阵，单位矩阵各矩阵分量如下。

[1, 0, 0,