| 方法 | 說明 | | --- | --- | | 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() 方法。