CanvasRenderingContext2D: transform() メソッド

構文

transform(a, b, c, d, e, f)

座標変換行列は $\left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]$ として記述されます。

引数

a (m11)

行列の 1 行目 1 列目のセルです。

b (m12)

行列の 2 行目 1 列目のセルです。

c (m21)

行列の 1 行目 2 列目のセルです。

d (m22)

行列の 2 行目 2 列目のセルです。

e (m41)

行列の 1 行目 3 列目のセルです。

f (m42)

行列の 2 行目 3 列目のセルです。

もともと $(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.transform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

結果

仕様書

ブラウザーの互換性

関連情報

• このメソッドを定義しているインターフェイス: CanvasRenderingContext2D
• CanvasRenderingContext2D.setTransform()