例

矩形を描画し、 setTransform() により変換行列をリセットした後に新しい変換行列を作成し、再度矩形を描画します。更に、変換行列をリセットした後に新しい変換行列を作成し、そして再び矩形を描画します。 setTransform() を呼び出すたびに、前の変換行列をリセットし、その後で新しい行列が作られます。従って、下の例では、赤色の矩形は青の矩形の下にあるので表示されていないことに注意してください：

JavaScript:

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

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

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

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

Try it Yourself ❯

ブラウザ・サポート

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

定義と用法

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

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

setTransform() メソッドは、現在の変換を単位行列にリセットし、次に、同じ引数で transform() を実行します。

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

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

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

HTML canvas setTransform() メソッド

例

ブラウザ・サポート

定義と用法

パラメータの値