HTML5 Canvas的转换方法，在线实例演示如何使用HTML5 Canvas进行旋转、移动、缩放，围绕不同点旋转，缩放比例设置等。
您可以将转换应用于HTML5画布上绘制的任何内容。这是您可以应用的转换的列表:
- 移动(移动绘制的内容)
- 旋转
- 缩放
转换矩阵
可以在2D上下文中设置转换矩阵。此矩阵将乘以画布上绘制的所有内容。对于本教程中使用的示例，我将其设置为“身份”矩阵，该矩阵乘以x，y坐标集后得出x，y。换句话说，不进行任何转换。
这是将转换矩阵设置为单位矩阵的方法:
context.setTransform(1, 0, 0, 1, 0, 0);
移动
可以将移动应用于画布上绘制的所有内容。移动意味着所画内容的重定位。这是您在代码中设置移动的方式:
var x = 100;
var y = 50;
context.translate(x, y);
旋转
您可以将自动旋转应用于在HTML5画布上绘制的任何形状。这是通过rotate()2D上下文上的功能完成的 。这是一个简单的示例:
context.rotate(radians);
旋转角度作为参数传递给rotate()函数。该值必须以弧度而不是度为单位。
设置旋转后绘制的所有形状都将绕画布上的0,0点旋转。这是画布的左上角。
与平移一样，旋转仅应用于rotate() 调用函数后绘制的所有形状。
围绕不同点旋转
如前所述，所有形状都围绕画布（0,0）的左上角旋转。但是，如果您希望形状绕不同的点旋转怎么办？例如，围绕其自身的中心旋转形状？
要围绕其自身的中心旋转形状，必须首先将画布平移到形状的中心，然后旋转画布，然后将画布平移回0,0，然后绘制形状。
缩放
可以对在HTML5画布上绘制的所有形状应用自动缩放。
缩放时，可以通过某些因素缩放x轴和y轴上的所有坐标。
缩放比例
您可以使用缩放功能来实现比例缩放功能。下面的画布包含4个矩形。画布下方是一个输入字段，可用于更改缩放级别（缩放比例）.
平移，旋转和缩放组合
当然可以将所有三个转换组合在同一画布上。但是，就像组合旋转和平移时一样，对2D上下文进行函数调用的顺序也很重要。如果scale()在调用translate() 等之前调用，则结果看起来会有所不同。您可能需要对函数调用的顺序进行一些调整才能使其正确。
