HTMLキャンバスsetTransform（）メソッド
例
長方形を描画し、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);
ブラウザのサポート
表の数字は、このメソッドを完全にサポートする最初のブラウザバージョンを示しています。
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定義と使用法
キャンバス上の各オブジェクトには、現在の変換行列があります。
setTransform（）メソッドは、現在の変換を単位行列にリセットしてから 、同じ引数を使用してtransform（）を実行します。
つまり、setTransform（）メソッドを使用すると、現在のコンテキストを拡大縮小、回転、移動、および傾斜させることができます。
注：変換は、setTransformメソッドが呼び出された後に作成された図面にのみ影響します。
| JavaScript構文： | context .setTransform（a、b、c、d、e、f）; |
|---|
パラメータ値
| Parameter | Description | Play it |
|---|---|---|
| a | Scales the drawings horizontally | |
| b | Skews the drawings horizontally | |
| c | Skews the drawings vertically | |
| d | Scales the drawings vertically | |
| e | Moves the the drawings horizontally | |
| f | Moves the the drawings vertically |
❮Canvasオブジェクト