JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5で変換行列を作成するには？transform()とsetTransform()の使い方を解説

HTML5のCanvasにおける変換行列とは

HTML5のCanvas APIには、変換行列（transformation matrix）を直接操作できるメソッドが用意されています。変換行列は、初期状態では単位行列（identity transform）になっており、その後、各種の変換メソッドを呼び出すことで自由に調整できます。これにより、図形の拡大縮小・回転・せん断（スキュー）・平行移動などを柔軟に組み合わせた描画が可能になります。

変換行列を操作する主なメソッド

No.メソッドと説明
1 transform(m11, m12, m21, m22, dx, dy)
現在の変換行列に、引数で指定された行列を掛け合わせ（乗算し）ます。既存の変換を維持したまま、新たな変換を追加したい場合に使用します。
2 setTransform(m11, m12, m21, m22, dx, dy)
現在の変換行列を、引数で指定された行列に置き換えます。それまで適用されていた変換をすべて破棄し、新しい変換を設定したい場合に使用します。

transform()メソッドの計算内容

transform(m11, m12, m21, m22, dx, dy) メソッドは、現在の変換行列に対して、次の行列を掛け合わせます。

m11   m21   dx
m12   m22   dy
0     0     1

引数の意味

  • m11, m12, m21, m22： 行列の各要素。水平・垂直方向のスケーリング、回転、せん断（傾斜）などを制御します。
  • dx, dy： 水平方向・垂直方向の平行移動量（ピクセル単位）。

サンプルコード

以下は、transform() メソッドと setTransform() メソッドを使用した簡単な実装例です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Canvas 変換行列の例</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="300"
         style="border:1px solid #ccc;"></canvas>

  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    // transform()：せん断と平行移動を現在の変換に追加
    ctx.transform(1, 0.5, -0.5, 1, 30, 10);
    ctx.fillStyle = "blue";
    ctx.fillRect(50, 50, 100, 100);

    // setTransform()：単位行列にリセットしてから描画
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.fillStyle = "red";
    ctx.fillRect(220, 160, 80, 80);
  </script>
</body>
</html>

この例では、最初に transform(1, 0.5, -0.5, 1, 30, 10) を呼び出すことで、青い四角形にせん断（傾き）と平行移動が適用されます。続けて setTransform(1, 0, 0, 1, 0, 0) を呼び出すと、変換行列が単位行列にリセットされるため、その後に描画される赤い四角形は変換の影響を受けずに表示されます。

使い分けのポイント

  • 既存の変換にさらに変換を重ねたい場合は transform()
  • 変換をリセットまたは一括設定したい場合は setTransform()

この2つのメソッドを正しく使い分けることで、複雑な座標変換を伴うグラフィック描画も効率的に実装できます。

  1. HTMLで参考文献（Bibliography）を作成する方法

    参考文献（Bibliography）とは、執筆時に参照した書籍や資料の一覧をまとめて記載するセクションのことです。HTMLを使えば、こうした参考文献リストを簡単に作成できます。具体的には、<ol>タグで書籍を番号付きリストとして列挙し、<cite>タグで作品のタイトルをマークアップします。 <cite>タグは、書籍のタイトルだけでなく、楽曲、絵画、映画など、さまざまな作品のタイトルを示す際にも使用できます。このタグは「引用」を意味しており、タグ内に記述した内容はすべて作品のタイトルとして扱われます。 サンプルコード それでは、実際にHTMLで参考文献リスト

  2. HTML5 SVGで角丸の長方形を作成する方法【rx・ry属性の使い方】

    SVG（Scalable Vector Graphics）は、XMLを使用して2Dグラフィックスやグラフィカルなアプリケーションを記述するための言語です。記述されたXMLは、SVGビューアによって描画されます。現在、主要なWebブラウザの多くは、PNGやGIF、JPGなどの画像形式と同じようにSVGを表示できるようになっています。HTMLのSVGで長方形を描画するには、<rect>要素を使用します。さらに、角を丸くしたい場合はrx属性とry属性を指定します。この2つの属性に値を設定することで、長方形の四隅が滑らかに丸められます。実装例以下のコードを実行すると、HTML5 SVGで角