例
で新しい変換行列追加し、四角形を描画します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); »それを自分で試してみてください ブラウザのサポート
表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。
| 方法 | |||||
|---|---|---|---|---|---|
| transform() | はい | 9.0 | はい | はい | はい |
定義と使用法
キャンバス上の各オブジェクトは、現在の変換行列を持っています。
transform()メソッドは、現在の変換行列を置き換えます。 それによって記載マトリックスと、現在の変換行列を乗算します。
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
言い換えれば、 transform()メソッドを使用すると、拡大縮小、回転、移動、および現在のコンテキストをゆがめることができます。
注：後の変換のみ作られた図面に影響しますtransform()メソッドが呼び出されます。
注： transform()メソッドによって作ら他の変換に比較的振舞うrotate(), scale(), translate() 、またはtransform()例：あなたはすでに2によってスケーリングするために図面を設定している場合、およびtransform()メソッドは、2つのことで、あなたの図面をスケーリングし、あなたの図面は今4によってスケールします。
ヒント：チェックアウトsetTransform()他の変換に比較的動作しない方法を、。
| JavaScriptシンタックス： | context.transform( a,b,c,d,e,f ); |
|---|
パラメーター値
| パラメーター | 説明 | それを再生します |
|---|---|---|
| a | 水平方向に図面をスケーリング | それを再生します» |
| b | 水平方向に描画スキュー | それを再生します» |
| c | 垂直に描画のスキュー | それを再生します» |
| d | 垂直方向に描画を拡大縮小 | それを再生します» |
| e | 水平方向の描画を移動 | それを再生します» |
| f | 垂直方向に描画を移動 | それを再生します» |