CanvasRenderingContext2D: getTransform() メソッド
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年7月.
CanvasRenderingContext2D.getTransform() はキャンバス 2D API のメソッドで、このコンテキストに適用されている現在の変換行列を取得します。
構文
js
getTransform()
引数
None.
返値
DOMMatrix オブジェクトです。
変換行列は次のよう記述されます。
メモ:
返されたオブジェクトはライブではないため、更新しても現在の変換行列には影響せず、現在の変換行列を更新しても既に返された DOMMatrix には影響しません。
例
次の例では、2 つの <canvas> 要素があります。まず、最初の要素のコンテキストに CanvasRenderingContext2D.setTransform() を使用して座標変換を適用し、その上に四角形を描画します。その後、getTransform() を使用してその行列を取得します。
次に、取得した行列を setTransform() に直接DOMMatrixオブジェクトを渡すことで、2つ目のキャンバスコンテキストに直接適用し、その上に円を描画します。
HTML
html
<canvas width="240"></canvas> <canvas width="240"></canvas>
CSS
css
canvas {
border: 1px solid black;
}
JavaScript
js
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();
結果
仕様書
| Specification |
|---|
| HTML # dom-context-2d-gettransform-dev |
ブラウザーの互換性
関連情報
- このメソッドを定義しているインターフェイス:
CanvasRenderingContext2D CanvasRenderingContext2D.transform()