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

HTML タグ完全ガイド

HTML canvas transform()メソッド

transform()はCanvas 2D APIは、現在の変換にマトリックスを重ね合わせる方法を使用します。マトリックスはメソッドの引数で説明されます。あなたは、コンテキストを拡大、回転、移動、そして傾斜できます。

オンラインサンプル

矩形を描画し、transform()を使用して新しい変換マトリックスを追加し、その矩形を再描画し、新しい変換マトリックスを追加し、再び矩形を描画します。transform()が呼び出されるたびに、それが先前的な変換マトリックスに基づいていますので、注意してください：

サンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas transform()メソッドの使用-基本チュートリアル(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
あなたのブラウザは HTML をサポートしていません。5　canvas タグ。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.fillStyle="green";
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);
</script>
</body>
</html>

テストを見てみる ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

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

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

定義と用法

キャンバス上の各オブジェクトには現在の変換マトリックスがあります。

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

パラメータの値

パラメータ	説明
a	水平方向に拡大する図形。
b	水平方向に傾斜する図形。
c	垂直方向に傾斜する図形。
d	垂直方向に拡大する図形。
e	水平方向に移動する図形。
f	垂直方向に移動する図形。

HTML canvas 参考マニュアル

HTML: <template> タグ