轉換簡介

變換通過移動，旋轉和縮放該點來改變給定點的起始位置。

• 翻譯： 通過 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);