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() | Yes | 9.0 | Yes | Yes | Yes |
定義と使用法
キャンバス上の各オブジェクトには、現在の変換行列があります。
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 | Horizontal scaling | |
b | Horizontal skewing | |
c | Vertical skewing | |
d | Vertical scaling | |
e | Horizontal moving | |
f | Vertical moving |
❮HTMLキャンバスリファレンス