HTMLキャンバスtransform（）メソッド
例
長方形を描画し、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);
ブラウザのサポート
表の数字は、このメソッドを完全にサポートする最初のブラウザバージョンを示しています。
| Method | |||||
|---|---|---|---|---|---|
| transform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定義と使用法
キャンバス上の各オブジェクトには、現在の変換行列があります。
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）; |
|---|
パラメータ値
| Parameter | Description | Play it |
|---|---|---|
| a | Scales the drawing horizontally | |
| b | Skew the the drawing horizontally | |
| c | Skew the the drawing vertically | |
| d | Scales the drawing vertically | |
| e | Moves the the drawing horizontally | |
| f | Moves the the drawing vertically |
❮Canvasオブジェクト