例
、四角形を描画リセットと新しい変換マトリックス作成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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定義と使用法
キャンバス上の各オブジェクトは、現在の変換行列を有します。
setTransform()メソッドは、現在は単位行列に変換をリセットし、その後、実行されますtransform()同じ引数で。
言い換えれば、 setTransform()メソッドを使用すると、拡大縮小、回転、移動、および現在のコンテキストを歪めることができます。
Note:変換が唯一のsetTransformメソッドが呼び出された後に作られた図面に影響を与えます。
| JavaScriptシンタックス： | context 。 setTransform( a,b,c,d,e,f ) |
|---|
パラメータ値
| パラメーター | 説明 | それを再生します |
|---|---|---|
| a | 水平図面をスケーリング | それを再生します» |
| b | 水平図面をスキュー | それを再生します» |
| c | 縦方向に図面をスキュー | それを再生します» |
| d | 縦方向に図面をスケーリングします | それを再生します» |
| e | 水平図面を移動させます | それを再生します» |
| f | 縦方向に図面を移動します | それを再生します» |
<Canvasオブジェクト