例
で新しい変換行列の追加、四角形を描画します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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定義と使用法
キャンバス上の各オブジェクトは、現在の変換行列を有します。
transform()メソッドは、現在の変換行列を置き換えます。 それにより記載マトリックスと、現在の変換行列を乗算します。
| A | C | E |
| B | D | F |
| 0 | 0 | 1 |
言い換えれば、 transform()メソッドを使用すると、拡大縮小、回転、移動、および現在のコンテキストを歪めることができます。
Note:後の変換のみが行われた図面に影響するtransform()メソッドが呼び出されます。
Note: transform()メソッドによって作ら他の変換に比較的振る舞いrotate() 、 scale() translate() 、またはtransform() 例：あなたはすでに2でスケールする図面を設定している場合、およびtransform()メソッドは、2つのことで、あなたの図面をスケーリングし、あなたの図面は現在4でスケールします。
Tip:チェックアウトsetTransform()他の変換には、比較的に動作しない方法を、。
| JavaScriptシンタックス： | context 。 transform( a,b,c,d,e,f ) |
|---|
パラメータ値
| パラメーター | 説明 | それを再生します |
|---|---|---|
| a | 水平方向の描画をスケーリングします | それを再生します» |
| b | 水平方向の描画をゆがめます | それを再生します» |
| c | 縦に描画スキュー | それを再生します» |
| d | 縦に描画スケール | それを再生します» |
| e | 水平方向の描画を移動 | それを再生します» |
| f | 縦に描画移動 | それを再生します» |
<Canvasオブジェクト