Canvas setTransform()メソッド

Canvas リファレンスマニュアル

定義と用法

キャンバス上の各オブジェクトは、現在の変換マトリックスを持っています。

setTransform() メソッドは、現在の変換マトリックスをユニットマトリックスにリセットし、同じパラメータでsetTransform()を実行します transform().

言い換えれば、setTransform()は、現在の環境を拡大、回転、移動し、傾斜するのを許可します。

注記：この変換はsetTransform()メソッド呼び出しの後の描画にのみ影響します。

例

矩形を描画し、setTransform()を使って変換マトリックスをリセットして新しい変換マトリックスを作成し、再度矩形を描画し、変換マトリックスをリセットして新しい変換マトリックスを作成し、さらに矩形を描画します。setTransform()を呼び出すたびに、前の変換マトリックスをリセットし、新しいマトリックスを構築しますので、以下の例では、赤い矩形は青い矩形の下にあります：

ブラウザはHTML5のキャンバスタグをサポートしていません。

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);

自分で試してみてください

文法

context.setTransform(a,b,c,d,e,f);

パラメータ値

パラメータ 説明
a 水平回転描画。
b 水平傾斜描画。
c 垂直傾斜描画。
d 垂直縮尺描画。
e 水平に移動するグラフィック描画。
f 垂直に移動するグラフィック描画。

ブラウザのサポート

表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注記：Internet Explorer 8 以降のバージョンは <canvas> 要素をサポートしていません。

Canvas リファレンスマニュアル