CanvasRenderingContext2D：setTransform() 方法

語法

setTransform(a, b, c, d, e, f)
setTransform(matrix)

變換矩陣描述如下：$\left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]$.

這個變換矩陣會乘以代表畫布上每個繪製點的列向量的左邊，以生成畫布上使用的最終座標。

引數

setTransform() 接受兩種型別的引數。舊的型別包含幾個引數，用於表示要設定的變換矩陣的各個分量。

a (m11)

矩陣第一行第一列的單元格。

b (m12)

矩陣第二行第一列的單元格。

c (m21)

矩陣第一行第二列的單元格。

d (m22)

矩陣第二行第二列的單元格。

e (m41)

矩陣第一行第三列的單元格。

f (m42)

矩陣第二行第三列的單元格。

或者，你可以傳遞一個單一引數，該引數是一個物件，其中包含上述值作為屬性。引數名稱即屬性鍵，如果存在兩個同義名稱（例如 m11 和 a），它們必須是相同的數值，否則將丟擲 TypeError。使用物件形式可以省略某些引數 — a 和 d 預設為 1，而其餘引數預設為 0。

如果一個點的原始座標是$(x, y)$，那麼變換後它的座標將是$(ax + cy + e, bx + dy + f)$。這意味著

• e 和 f 控制著畫布的水平和垂直平移。
• 當 b 和 c 為 0 時，a 和 d 控制著畫布的水平和垂直縮放。
• 當 a 和 d 為 1 時，b 和 c 控制著畫布的水平和垂直傾斜。

返回值

無（undefined）。

示例

傾斜形狀

此示例將矩形垂直（.2）和水平（.8）傾斜。縮放和平移保持不變。

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

結果

檢索和傳遞 DOMMatrix 物件

在下面的示例中，我們有兩個 <canvas> 元素。我們使用第一種型別的 setTransform() 方法為第一個元素的上下文應用變換，並在其上繪製一個正方形，然後使用 CanvasRenderingContext2D.getTransform() 方法從中檢索矩陣。

然後，我們將檢索到的矩陣直接應用於第二個畫布上下文，方法是將 DOMMatrix 物件直接傳遞給 setTransform()（即第二種型別），並在其上繪製一個圓形。

HTML

<!-- First canvas (ctx1) -->
<canvas width="240"></canvas>
<!-- Second canvas (ctx2) -->
<canvas width="240"></canvas>

CSS

canvas {
  border: 1px solid black;
}

JavaScript

const canvases = document.querySelectorAll("canvas");
const ctx1 = canvases[0].getContext("2d");
const ctx2 = canvases[1].getContext("2d");

ctx1.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx1.fillRect(25, 25, 50, 50);

let storedTransform = ctx1.getTransform();
console.log(storedTransform);

ctx2.setTransform(storedTransform);
ctx2.beginPath();
ctx2.arc(50, 50, 50, 0, 2 * Math.PI);
ctx2.fill();

結果

規範

瀏覽器相容性

另見

• 定義此方法的介面：CanvasRenderingContext2D
• CanvasRenderingContext2D.transform()