例

矩形を描画し、transform() によって新しい変換行列を追加して再度矩形を描画します。更に、新しい変換行列を追加し、そして再び矩形を描画します。 transform() を呼び出すたびに、それは前の変換行列を基づいていることに注意してください：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)

ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);

ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);

Try it Yourself ❯

ブラウザ・サポート

表中の数字は、メソッドを完全にサポートした最初のブラウザ・バージョンを指定しています。

定義と用法

キャンバス上の各オブジェクトは、現在の変換行列を持っています。

transform() メソッドは、現在の変換行列を置き換えます。下に記載のマトリックスと、現在の変換行列を乗算します：

言い換えれば、transform() メソッドは、現在のコンテキストを scale（拡大縮小）、rotate（回転）、move（移動）、skew（傾斜）することができます。

メソッド
transform()	Yes	9.0	Yes	Yes	Yes

注: transform() メソッドが呼び出された後に作られた図形にのみ、変形は影響します。

注: transform() メソッドは、rotate()、scale()、translate()、transform()によって行われた、その他の変形に相対的に振舞います。例：すでに図形にスケールを 2 に設定し、transform() メソッドが 2 で図形をスケーリングする場合、図形のスケールは 4 になります。

チップ: 他の変形に相対的に動作しない、setTransform() メソッドをチェックしてください。

パラメータ	説明	Play it
a	横のスケーリング	Play it ❯
b	横の傾斜	Play it ❯
c	縦の傾斜	Play it ❯
d	縦のスケーリング	Play it ❯
e	横の移動	Play it ❯
f	縦の移動	Play it ❯

HTML canvas transform() メソッド

例

ブラウザ・サポート

定義と用法

パラメータの値