例
四角形を描画し、リセットし、使用して新しい変換行列作成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);
»それを自分で試してみてください ブラウザのサポート
表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。
| 方法 | |||||
|---|---|---|---|---|---|
| setTransform() | はい | 9.0 | はい | はい | はい |
定義と使用法
キャンバス上の各オブジェクトは、現在の変換行列を持っています。
setTransform()メソッドは、現在の変換を単位行列にリセットし、その後、実行されますtransform()同じ引数で。
言い換えれば、 setTransform()メソッドを使用すると、拡大縮小、回転、移動、および現在のコンテキストをゆがめることができます。
注意：変換はのみのsetTransformメソッドが呼び出された後に行われた図面に影響を与えます。
| JavaScriptシンタックス： | context.setTransform( a,b,c,d,e,f ); |
|---|
パラメーター値
| パラメーター | 説明 | それを再生します |
|---|---|---|
| a | 水平方向に図面をスケーリング | それを再生します» |
| b | 水平方向に図面をスキュー | それを再生します» |
| c | 垂直に図面をスキュー | それを再生します» |
| d | 垂直に図面をスケーリング | それを再生します» |
| e | 水平方向の図面を移動 | それを再生します» |
| f | 垂直方向の図面を移動 | それを再生します» |