我们可以将转换应用于HTML5画布上绘制的任何内容。这是我们可以应用的转换的列表：

• 变换(移动绘制的内容)
• 翻转
• 缩放比例

我将在本文中介绍所有这些转换。

转换矩阵

可以在2D上下文中设置转换矩阵。该矩阵将乘以画布上绘制的所有内容。对于本教程中使用的示例，我将其设置为"身份"矩阵，该矩阵乘以x，y坐标集后得出x，y。换句话说，不进行任何转换。

这是将转换矩阵设置为单位矩阵的方法：

context.setTransform(1, 0, 0, 1, 0, 0);

翻转

可以将变换应用于画布上绘制的所有内容。变换意味着所画内容的重定位。这是我们在代码中设置变换的方式：

var x = 100;
var y =  50;
context.translate(x, y);

本示例将在画布上绘制的所有形状在x轴上移动100，在y轴上移动50。

注意：平移仅适用于调用translate()函数后绘制的形状。在该函数调用之前绘制的形状不受影响。

这是另一个例子。在相同的坐标处绘制了两个矩形，但是在调用" translate()"函数之前绘制了一个矩形，在之后绘制了一个矩形。

context.fillStyle = "#ff0000";
context.fillRect(10,10, 100, 100);

context.translate(50, 25);

context.fillStyle = "#0000ff";
context.fillRect(10,10, 100, 100);

翻转

我们可以将自动旋转应用于在HTML5画布上绘制的任何形状。这是通过2D上下文中的rotate()函数完成的。这是一个简单的示例：

context.rotate(radians);

旋转的角度作为参数传递给rotate()函数。此值必须以弧度为单位，而不是以度为单位。

设置旋转后绘制的所有形状都将绕画布上的0,0点旋转。这是画布的左上角。

与平移一样，旋转仅应用于调用" rotate()"函数之后绘制的所有形状。

这是在设置旋转前后绘制相同矩形的示例：

context.fillStyle = "#ff0000";
context.fillRect(10,10, 100, 100);

context.rotate( (Math.PI / 180) * 25);  //rotate 25 degrees.

context.fillStyle = "#0000ff";
context.fillRect(10,10, 100, 100);

绕不同的点旋转

如前所述，所有形状都围绕画布(0,0)的左上角旋转。但是，如果我们希望形状绕不同的点旋转怎么办？例如，围绕其自身的中心旋转形状？

要围绕自己的中心旋转形状，必须首先将画布平移到形状的中心，然后旋转画布，然后将画布平移回0,0，然后绘制形状。

这是一个代码示例，该示例围绕其自身的中心旋转蓝色矩形：

var x      = 10;
var y      = 10;
var width  = 100;
var height = 100
var cx     = x + 0.5 * width;   // x of shape center
var cy     = y + 0.5 * height;  // y of shape center

context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);  //draw normal shape

context.translate(cx, cy);              //translate to center of shape
context.rotate( (Math.PI / 180) * 25);  //rotate 25 degrees.
context.translate(-cx, -cy);            //translate center back to 0,0

context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);

此示例首先将画布的中心平移(移动)到正方形的中心(cx，cy)。然后将画布旋转25度。然后，它将画布再次转换回0,0。现在，画布围绕cx，cy旋转了25度。我们绘制的所有内容都将围绕cx，cy旋转显示。最终，该矩形被绘制为好像什么都没发生一样，但是现在它会绕着cx，cy旋转25度。这仅使用转换调用即可实现。矩形的坐标不变。注意两个调用" context.fillRect()"的绘制红色和蓝色矩形的方式是相同的。正是它们之间的转换调用使它们出现在不同的位置和旋转位置。

缩放比例

可以对在HTML5画布上绘制的所有形状应用自动缩放。

缩放时，可以通过某些因素缩放x轴和y轴上的所有坐标。我们可以使用scale()函数设置这些因素，如下所示：

var scaleX = 2;
var scaleY = 2;
context.scale(scaleX, scaleY);

本示例将x轴和y轴上的所有坐标缩放2倍。

与translate()和rotate()一样，缩放比例仅应用于在调用scale()之后绘制的形状。

这是另一个绘制红色和蓝色矩形的代码示例，其中缩放比例适用于蓝色矩形：

var x      = 10;
var y      = 10;
var width  = 100;
var height = 100

context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);

context.scale(2,2);

context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);

请注意，蓝色矩形的大小是红色矩形的两倍。

还要注意，从蓝色矩形的左上角到画布的左上角(0,0)的距离也要大一倍。所有坐标都缩放了两倍，矩形的左上角坐标也是如此。如果要避免缩放时移动形状，则必须将缩放与平移结合起来。

缩放缩放

我们可以使用缩放功能来实现缩放功能。下面的画布包含4个矩形。画布下方是一个输入字段，可用于更改缩放级别(缩放级别)。

如果看到带有缩放级别值的文本字段，请输入介于1到10之间的缩放级别，然后跳出文本字段以查看结果。如果看到滑块，则只需移动滑块即可。

结合平移，旋转和缩放

当然可以将所有三个转换组合在同一画布上。但是，就像组合旋转和平移时一样，对2D上下文进行函数调用的顺序也很重要。如果在调用translate()等之前调用scale()，结果看起来会有所不同。我们可能需要对函数调用的顺序进行一些调整才能使其正确。