HTML5 Canvas 教程：九、变换
九、变换 Transformations
译者注：变换计算中需要用到很多矩阵变换运算，如果不熟悉矩阵变换运算，那么理解以下代码会有一定困难，建议先熟悉矩阵变换运算再阅读以下内容。这里有一篇很好的文章详细解释了矩阵运算：浅谈矩阵变换——Matrix。
9.1平移 Translate
为了在HTML5画布上实现平移，可以使用上下文对象的translate()方法。平移是一种移动整个画布的方法。例如，有一个在画布上绘制复杂图形的函数，并且需要平移图形，那么平移上下文要比调整组成图形的所有点的x和y位置容易得多。
平移首先通过变换画布上下文，然后再绘制图形。在本教程中，将平移画布上下文，然后在位置(0, 0)绘制矩形。由于画布上下文被平移，矩形也将被平移。
以上代码演示了在画布上平移一个矩形到居中位置。
9.2缩放变换 Scale Transform
要缩放HTML5画布，可以使用scale()方法，此方法可缩放画布的X和Y两个方向。
以上代码演示了在画布上绘制一个矩形，并在Y方向缩放0.5倍。
9.3旋转变换 Rotate Transform
要旋转HTML5画布，可以使用rotate()转换方法。旋转变换需要提供转过的弧度（注意不是角度）。为了定义旋转点，需要首先平移画布上下文对象，以便上下文的左上角位于所需的旋转点上。在本教程中，平移了画布上下文，使得上下文的左上角直接位于矩形的中心，从而产生围绕矩形中心的旋转。
以上代码演示了平移画布，绘制矩形，并将其旋转一定角度。
9.4自定义变换 Custom Transform
为了将自定义转换矩阵应用到HTML5画布，可以使用transform()方法。根据以下约定，该方法需要3×3矩阵的六个分量：
以上代码演示了自定义变换。
9.5斜切变换 Shear Transform
为了在HTML5画布上实现斜切变换，可以使用transform()方法进行矩阵转换。SX定义水平方向切变，SY定义垂直方向的切变。
以上代码演示了在画布上绘制一个蓝色矩形，并进行X方向的斜切变换。
9.6镜像变换 Mirror Transform
要使用HTML5 Canvas创建镜像变换，我们可以在上下文对象的x方向上应用负比例来水平翻转，或者可以在上下文对象的y方向上应用负比例来垂直翻转。
以上代码演示了在画布的X方向反转一段文字。
9.7重置变换 Reset Transform
为了重置HTML5 Canvas矩阵变换，可以使用setTransform()方法执行以下矩阵变换，将转换矩阵设置为其默认状态：
以上代码演示了在画布上重置变换，并用红色绘制默认状态的图形。
9.8状态栈变换 Transformation State Stack
为了用HTML5 Canvas保存和恢复不同的变换状态，可以使用canvas上下文对象的save()和restore()方法。
在本教程中，将通过在每次转换之前将状态推入状态堆栈来保存变换状态，也就是为上下文对象设置保存点，以便上下文能准确回复到保存点的状态。首先绘制一个蓝色矩形，恢复并弹出最后一个转换状态；再绘制一个红色矩形，恢复并弹出最后一个转换状态；再绘制一个黄色矩形，最后恢复并弹出最终转换状态；再绘制一个绿色矩形。
以上代码演示了在画布上保存和弹出状态变换。
9.9椭圆 Oval
要使用HTML5 Canvas创建一个椭圆形，可以为上下文状态设置一个保存点，然后水平拉伸画布上下文，画一个圆圈，然后再恢复画布到保存点的状态，最后应用样式。
以上代码演示了在画布上设置保存点，然后使画布在X方向放大2倍，再绘制一个圆（由于受到X方向放大两倍的影响，这个圆变成了椭圆），然后恢复到保存点并应用样式，最后为椭圆描边的过程。