HTMLキャンバスtransform()メソッド
定義と使用方法
キャンバス上の各オブジェクトは現在の変換マトリックスを持っています。
transform() メソッドは現在の変換マトリックスを置き換えます。以下に説明されるマトリックスを使用して現在の変換マトリックスを操作します：
a c e b d f 0 0 1
言い換えれば、transform()は、現在の環境を拡大、回転、移動し、傾斜させることを許可します。
注記：この変換は、transform()メソッドの呼び出しの後の描画にのみ影響します。
注記：transform()メソッドの行動は、以下のものに依存します： rotate()、scale()、translate() またはtransform()で行う他の変換。例えば：既に描画が2倍に拡大されている場合、transform()メソッドは描画を2倍に拡大し、描画は最終的に4倍に拡大されます。
ヒント：参照してください： setTransform() メソッドは、他の変換に対して行動しません。
インスタンス
矩形を描画します；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);
文法
context.transform(a,b,c,d,e,f);
パラメータの値
| パラメータ | 説明 |
|---|---|
| a | 水平拡大描画。 |
| b | 水平傾斜描画。 |
| c | 垂直傾斜描画。 |
| d | 垂直拡大描画。 |
| e | 水平移動描画。 |
| f | 垂直移動描画。 |
ブラウザのサポート
表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注記：Internet Explorer 8 以前のバージョンは <canvas> 要素をサポートしていません。
