Latest web development tutorials

HTMLキャンバスのsetTransform（）メソッド

HTMLキャンバスリファレンスマニュアル HTMLキャンバスリファレンスマニュアル

例

（）の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の、オペラ、ChromeとSafariのサポートのsetTransform（）メソッド。

注：のInternet Explorer 8およびそれ以前のバージョンでは、<キャンバス>要素をサポートしていません。

定義と使用法

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

現在の変換行列へのsetTransform（）メソッドは、マトリックスをリセットしてから、同じパラメータで実行する変換（） 。

言い換えれば、のsetTransform（）は、回転、ズーム移動し、現在の環境を傾けることができます。

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

JavaScriptシンタックス： コンテキスト.setTransform（A、B、C、D、E、F）。

パラメータ値

参数 描述
a 水平缩放绘图。
b 水平倾斜绘图。
c 垂直倾斜绘图。
d 垂直缩放绘图。
e 水平移动绘图。
f 垂直移动绘图。

HTMLキャンバスリファレンスマニュアル HTMLキャンバスリファレンスマニュアル