CanvasRenderingContext2D: getTransform() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年7月以降、すべてのブラウザーで利用可能です。

CanvasRenderingContext2D.getTransform() はキャンバス 2D API のメソッドで、このコンテキストに適用されている現在の変換行列を取得します。

構文

getTransform()

引数

None.

返値

DOMMatrix オブジェクトです。

変換行列は次のよう記述されます。

\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]

メモ: 返されたオブジェクトはライブではないため、更新しても現在の変換行列には影響せず、現在の変換行列を更新しても既に返された 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

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();

結果

仕様書

仕様書
HTML # dom-context-2d-gettransform-dev

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年2月11日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告