Latest web development tutorials

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

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

例

再び、新たな変換行列を追加する四角形を描画し、新たな変換行列を追加してから、再度四角形を描画するために（）を形質転換することにより四角形を描画します。 あなたは）（変換を呼び出すたびに、それはマトリックス上の変換を構築するために最初にされることに注意してください：

YourbrowserdoesnotsupporttheHTML5canvastag。

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

»をお試しください

ブラウザのサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9のは、Firefoxの、オペラ、ChromeとSafariのサポートは、（）メソッドを変換します。

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

定義と使用法

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

transform（）メソッドは、現在の変換行列を置き換えます。 これは、現在の変換行列に、以下に説明行列演算であります：

A C言語 電子
B D F
0 0 1

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

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

注：回転によって変換他方に対して行動transform（）メソッド（）、スケール（）、 （翻訳）または変換（）が完成。例えば：あなたは既に二度の図面に設定している場合、変換（）図面を拡大するメソッドは、あなたの図面は、最終的に4倍に拡大されます。

ヒント：チェックアウトのsetTransform（）他の変換動作に関連して発生しない方法。

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

パラメータ値

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

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