1. 平移——translate(x,y)

即将2D渲染上下文的原点从一个位置移动到另一个位置,实际上移动的是坐标原点,而不是所绘制的对象。translate(x,y)中的x,y表示各自平移的距离像素值。(下例在(0,0)位置绘制了平移前后的正方形)

2. 缩放——scale(x,y)

即调整2D渲染上下文的尺寸。scale(x,y)中的x,y表示缩放倍数。放大2倍实际上意味着现在你绘制的每个1px都变成2px。(如果你只想现在缩放一个图形,而以后不缩放,那就要结合save方法和restore方法。下例是在保持原点情况下进行平移缩放,然后又恢复初始状态)

3. 旋转——rotate(radians)

即旋转2D渲染上下文的角度。参数radians即以弧度为单位的旋转角度值。
注意 执行变形的顺序很重要。(下例依次展示了先旋转后平移 和 先平移后旋转的位置变化)

4. 变换矩阵

前面所介绍的平移、缩放和旋转方法都会影响一个东西,那就是变换矩阵。变换矩阵就是一组数字,它们各自描述一个特定变形类型。在画布中,我们使用的是一个3x3矩阵。
$$
\begin{bmatrix}
\ a & c & e \\
\ b & d & f \\
\ 0 & 0 & 1 \\
\end{bmatrix} =
\begin{bmatrix}
\ x轴缩放 & x轴倾斜 & x轴平移 \\
\ y轴倾斜 & y轴缩放 & y轴平移 \\
\ 0 & 0 & 1 \\
\end{bmatrix}
$$
变换矩阵的默认值,一个新的2D渲染上下文将包含一个全新的变换矩阵,即单位矩阵。单位矩阵表示完全未执行过变形。
$$
\begin{bmatrix}
\ 1 & 0 & 0 \\
\ 0 & 1 & 0 \\
\ 0 & 0 & 1 \\
\end{bmatrix}
$$

操作变换矩阵——transform和setTransform

transform(xScale, ySkew, xSkew, yScale, xTrans, yTrans)对应上面矩阵:transform(a, b, c, d, e, f)
setTransform方法是直接设置变换矩阵的值。而transform方法实际上是将现有的变换矩阵乘以你所指定的值。如果你多次调用transform,那么每一次变形都是应用到前一个变形所得到的变换矩阵,即会有一个累积效应。(例子中是将先执行平移放大,然后将矩阵重置为单位矩阵,再通过设置参数来调用transform方法实现了旋转效果)

参考资料:《Foundation HTML5 Canvas For Games and Entertainment》Chapter 4 Authors: Hawkes, Rob