HTML5 canvas transform メソッド
 HTML5 canvas リファレンス
例
矩形を描画し、transform メソッドを使用してキャンバスを回転させ、再度矩形を描画します:
JavaScript:
...
ctx.font="30px Arial";
ctx.fillText("Transform",10,30);
ctx.transform(0.93,0.3,-0.3,0.93,0,0);
ctx.fillStyle="lightblue";
ctx.fillRect(0,0,250,100)
...
Try it yourself »
定義と用法
transform メソッドは、キャンバスのフォームを変更するのに行列を使用します。
transform メソッドは、キャンバスを伸縮、回転、移動、傾斜することができます。
変形は、transform メソッドが呼び出された後に作られた図面にだけ影響を与えます。
transform メソッドは、行列を表す 6 つのパラメータを取ります。
transform メソッドは、要素の回転、伸縮または移動により行われた他の変形に相対して振舞います。
すなわち、図面にスケール 2 を既に設定しており、transform メソッドが 2 で図面をスケールする場合、
図面は 4 にスケールされます。
チップ: 他の変形に関連して動作しない setTransform メソッドをチェックしてください。
| JavaScript 構文: |
context.transform(a,b,c,d,e,f); |
ブラウザ・サポート
transform メソッドは、主要な全ブラウザがサポートしています。
パラメータ値
HTML5 canvas リファレンス
|