| 方法 | 說明 |
| --- | --- |
| translate() | 平移 |
| scale() | 縮放 |
| rotate() | 旋轉 |
| transform()、setTransform() | 變換矩陣 |
Canvas 的這些變形操作,不僅可以用于圖形,還可以用于圖像和文字。
`cxt.translate(x, y)`:x 表示圖形在 x 軸方向移動的距離,默認為 px;y 同理。
`cxt.scale(x, y)`:x 表示圖形在 x 軸方向的縮放倍數,y 同理。另外,scale() 方法還有以下 “副作用” 需要注意,即 scale() 方法會改變圖形的以下幾點:
- 左上角坐標(比如放大 2 倍,左上角坐標會變為原來的 2 倍)
- 寬度或高度
- 線條寬度
`cxt.rotate(angle)`:參數 angle 表示圖形旋轉的角度,取值為 -Math.PI*2 ~ Math.PI*2。當 angle < 0 時,圖形順時針旋轉;當 angel > 0 時,圖形逆時針旋轉。
推薦寫法如下:
```js
120*Math.PI/180 // 120°
150*Math.PI/180 // 150°
```
## 改變旋轉中心
默認情況下,圖形旋轉是以 Canvas 坐標原點為旋轉中心的。如果我們想以某一點(x,y)為旋轉中心,可以先使用 translate(x, y),然后再使用 rotate() 方法。