HTML canvas setTransform()メソッド

Canvas 对象参考手册Canvas オブジェクト

例

矩形を描画し、setTransform() でリセットして新しい変換行列を作成し、再度矩形を描画し、リセットして新しい変換行列を作成し、その後もう一度矩形を描画します。setTransform() を呼び出すたびに、以前の変換行列をリセットしてから新しい行列を構築することに注意してください。したがって、以下の例では、赤い矩形は青い矩形の下にあるため表示されません：

YourbrowserdoesnotsupporttheHTML5canvastag.

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

試してみる »

ブラウザサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safari は setTransform() メソッドをサポートしています。

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

定義と用法

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

setTransform() メソッドは、現在の変換行列を単位行列にリセットし、同じ引数で実行します。transform()。

言い換えると、setTransform() を使用すると、現在の環境を拡大縮小、回転、移動、傾斜させることができます。

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

JavaScript 構文： context.setTransform(a,b,c,d,e,f);

パラメータ値

引数 説明
a 描画を水平方向に拡大縮小します。
b 描画を水平方向に傾斜させます。
c 描画を垂直方向に傾斜させます。
d 描画を垂直方向に拡大縮小します。
e 描画を水平方向に移動します。
f 描画を垂直方向に移動します。

Canvas 对象参考手册Canvas オブジェクト

その他の拡張