在HTML5 canvas教程的这一部分中，我们将讨论变换。

仿射变换是由零个或多个线性变换（旋转，缩放，或剪切）和平移（移动）。可以将多个线性变换组合成单个矩阵。旋转是使刚体围绕固定点移动的变换。缩放是放大或缩小对象的转换。比例因子在所有方向是相同的。翻译是一个转换，每个点在指定的方向上移动一个恒定的距离。剪切是将物体垂直于给定轴线移动的变换，轴的一侧的值比另一侧更大。

有一种transform()方法，它将当前变换与方法参数描述的矩阵相乘。我们能够缩放，旋转，移动和剪切上下文。也有执行特定的转换方法： translate()，rotate()，和scale()。

平移变换

以下示例显示了简单的平移变换。

translation.html

该示例在画布的中间绘制一个圆。

该translate()方法将坐标系的原点移动到画布的中间。

画一个圆。它的中心点是画布的中间。

图：平移变换

旋转变换

下一个例子演示了一个旋转。

rotation.html

该示例在矩形上执行旋转。

该rotate()方法执行旋转。角度参数表示顺时针旋转角度，以弧度表示。

图：旋转变换

缩放变换

使用该scale()方法进行缩放。该方法有两个参数：x比例因子和y比例因子。

scaling.html

在这个例子中，有一个矩形对象。首先，我们将其缩小，然后我们缩小一点。

转换操作是叠加的。为了隔离平移和缩放操作，我们将它们放在save()和restore()方法之间。该save()方法保存画布的整个状态，该restore() 方法将恢复它。

图：缩放

剪切

剪切是一种使沿着一个或两个轴的物体的形状发生变形的变换。像尺度和平移一样，可以沿着坐标轴的一个或两个沿着剪切。

shearing.html

没有一个特定的剪切方法，我们使用通用 transform()方法。

这条线使得矩形的线条更平滑。

蓝色矩形水平剪切（歪斜）。该transform()方法的参数有：水平缩放，水平剪切，垂直剪切，垂直缩放，水平平移和垂直平移。

图：剪切

圆环

在下面的例子中，我们通过旋转一个椭圆来创建一个复杂的形状。

DonutEx.java

该示例使用ellipse()方法，在编写本教程的时候，所有浏览器都不支持此方法。该示例运行在Chrome和Opera上。

椭圆的中心点位于画布的中心。

我们创建36个椭圆。椭圆旋转。该ellipse() 方法采用以下参数：椭圆中心点的x和y坐标，椭圆的长轴半径，椭圆的短轴半径，旋转角，起始角和终点角。

在HTML5 canvas教程的这一部分中，我们讨论了变换。