转换简介

变换通过移动，旋转和缩放该点来改变给定点的起始位置。

• 翻译： 通过 distanceX 和 distanceY 移动一个点。
• 旋转： 围绕旋转点旋转一个点 radian angle。Html Canvas 中的默认旋转点是 Canvas 的左上角原点[x = 0，y = 0]。但你可以使用翻译重新定位旋转点。
• 缩放： 通过 scalingFactorX 和 scalingFactorY 从缩放点缩放点的位置。Html Canvas 中的默认缩放点是 Canvas 的左上角原点[x = 0，y = 0]。但你可以使用翻译重新定位缩放点。

你还可以通过使用 context.transform 直接设置画布的变换矩阵来执行不太常见的变换，例如剪切（倾斜）。

用 context.translate(75,25) 翻译（==移动）一个点

用 context.rotate(Math.PI/8) 旋转一个点

用 context.scale(2,2) 缩放一个点

Canvas 实际上通过改变画布的整个坐标系来实现变换。

• context.translate 会将画布[0,0]原点从左上角移动到新位置。
• context.rotate 将围绕原点旋转整个画布坐标系。
• context.scale 将缩放原点周围的整个画布坐标系。可以想象这是增加画布上每个 x，y 的大小：every x*=scaleX 和 every y*=scaleY。

Canvas 转换是持久的。所有新绘图将继续转换，直到你将画布的转换重置为其默认状态（==完全未转换）。你可以重置为默认值：

// reset context transformations to the default (untransformed) state
context.setTransform(1,0,0,1,0,0);