HTMLキャンバスsetTransform()メソッド
定義と使用方法
キャンバス上の各オブジェクトは現在の変換マトリックスを持っています。
setTransform() メソッドは現在の変換マトリックスをユニットマトリックスにリセットし、同じパラメータで実行します transform().
言い換えれば、setTransform()は現在の環境を拡大、回転、移動し、傾斜させることを許可します。
注記：この変換はsetTransform()メソッド呼び出しの後の描画にのみ影響します。
例
矩形を描画し、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);
構文
context.setTransform(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> 要素がサポートされていません。
