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

HTML5 Canvasの変換行列とは？基本の仕組みと実装例をわかりやすく解説

HTML5のCanvas（キャンバス）には、変換行列（トランスフォーメーションマトリクス）を直接操作できるメソッドが用意されています。変換行列は、描画される図形の位置・回転・拡大縮小などを数学的に制御するための仕組みで、Canvasの描画状態に大きく影響します。

変換行列は、初期状態では必ず「単位変換（アイデンティティ変換）」、つまり何も変形を加えていない状態から始まります。その後、各種の変換メソッドを使って行列を調整していくことで、自由な座標変換が可能になります。

主な変換メソッド

  • translate(x, y)：原点を指定した座標へ移動させます
  • rotate(angle)：指定した角度だけ回転させます
  • scale(x, y)：横方向・縦方向に拡大または縮小します
  • transform(a, b, c, d, e, f)：現在の変換行列に新しい変換を掛け合わせます
  • setTransform(a, b, c, d, e, f)：現在の変換行列をリセットし、引数で指定した行列に置き換えます

実装例

以下は、Canvasの変換行列を使って図形を回転させながら描画するサンプルコードです。12個の正方形を少しずつ回転させながら色を変えて描画し、最後にsetTransform()で行列をリセットして半透明の青い正方形を重ねています。

<!DOCTYPE HTML>
<html>
   <head>
      <script>
         function drawShape(){

            // DOMを使ってcanvas要素を取得
            var canvas = document.getElementById('mycanvas');

            // canvas非対応ブラウザの場合は実行しない
            if (canvas.getContext){
               // getContextで2D描画コンテキストを取得
               var ctx = canvas.getContext('2d');
               var sin = Math.sin(Math.PI/6);
               var cos = Math.cos(Math.PI/6);
               ctx.translate(200, 200);
               var c = 0;

               // 12個の正方形を回転させながら描画
               for (var i=0; i <= 12; i++) {
                  c = Math.floor(255 / 12 * i);
                  ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
                  ctx.fillRect(0, 0, 100, 100);
                  ctx.transform(cos, sin, -sin, cos, 0, 0);
               }

               // 変換行列をリセットし、半透明の正方形を描画
               ctx.setTransform(-1, 0, 0, 1, 200, 200);
               ctx.fillStyle = "rgba(100, 100, 255, 0.5)";
               ctx.fillRect(50, 50, 100, 100);
            }
            else {
               alert('このデモを表示するにはSafariまたはFirefox 1.5+が必要です。');
            }
         }
      </script>
   </head>
   <body onload = "drawShape();">
      <canvas id = "mycanvas" width = "400" height = "400"></canvas>
   </body>
</html>

コードのポイント

  • Math.sin(Math.PI/6)とMath.cos(Math.PI/6)により、30度（π/6ラジアン）ごとの回転に必要な値を計算しています。
  • ctx.translate(200, 200)で原点をキャンバス中央付近に移動し、回転の中心を調整しています。
  • ループ内のctx.transform()は、現在の行列に対して回転変換を累積的に適用するため、正方形が扇状に並んで描画されます。
  • 最後のctx.setTransform(-1, 0, 0, 1, 200, 200)は、これまでの変換をすべて破棄して新しい行列を設定する例です。a要素が-1になっているため、水平方向に反転した状態で描画されます。

このように、transform()は既存の変換に上書きせず掛け合わせるのに対し、setTransform()は完全に置き換えるという違いがあります。用途に応じて使い分けることで、複雑な図形やアニメーション表現も柔軟に実現できます。

  1. HTML5のCanvasで使える無料ライブラリとは？おすすめ3選をわかりやすく解説

    Webサイトにインタラクティブな要素を追加したいなら、Canvas用の無料ライブラリを活用することで開発作業を大幅に効率化できます。まずは、HTML5でキャンバスを作成する基本方法から見ていきましょう。HTML5のcanvasタグの基本HTMLの<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックやアニメーションを描画するために使用される要素です。このタグはHTML5で新たに導入されました。以下のコードを実行すると、HTML5でキャンバスを作成できます。サンプルコード<!DOCTYPE html> <html>   &n

  2. 変数変換とは？単純関数変換と標準化の基礎をわかりやすく解説

    変数変換（variable transformation）とは、ある変数の値に対して特定の変換を適用する操作のことです。言い換えれば、すべてのオブジェクトに対して、そのオブジェクトが持つ変数の値に同じ変換が一様に適用されます。例えば、変数の「大きさ」だけが重要である場合には、絶対値を取ることで変数の値を変換できます。 変数変換には主に2種類あります。「単純関数変換」と「標準化（正規化）」です。以下、それぞれについて詳しく見ていきましょう。 単純関数変換 単純関数変換では、各値に対して独立に単純な数学関数を適用します。変数xに対する変換の例としては、xk、log x、ex、√x、1/x、sin