CanvasRenderingContext2D: transform() 方法
Canvas 2D API 的 CanvasRenderingContext2D.transform() 方法將當前變換乘以該方法引數所描述的矩陣。這允許您縮放、旋轉、平移（移動）和傾斜畫布上下文。
注意：另請參閱 setTransform() 方法，該方法將當前變換重置為單位矩陣，然後呼叫 transform()。
語法
js
transform(a, b, c, d, e, f)
變換矩陣描述如下：.
引數
a(m11)-
矩陣第一行第一列的單元格。
b(m12)-
矩陣第二行第一列的單元格。
c(m21)-
矩陣第一行第二列的單元格。
d(m22)-
矩陣第二行第二列的單元格。
e(m41)-
矩陣第一行第三列的單元格。
f(m42)-
矩陣第二行第三列的單元格。
如果一個點的原始座標是，那麼變換後其座標將變為。這意味著
e和f控制著畫布上下文的水平和垂直平移。- 當
b和c為0時，a和d控制著畫布上下文的水平和垂直縮放。 - 當
a和d為1時，b和c控制著畫布上下文的水平和垂直傾斜。
返回值
無（undefined）。
示例
傾斜圖形
此示例將一個矩形垂直（.2）和水平（.8）傾斜。縮放和平移保持不變。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.transform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);
結果
規範
| 規範 |
|---|
| HTML # dom-context-2d-transform-dev |
瀏覽器相容性
載入中…