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

HTML5 Canvasの変換行列（transform・setTransform）の使い方を徹底解説

HTML5のCanvas APIには、変換行列（Transformation Matrix）を直接操作できるメソッドが用意されています。変換行列は初期状態では単位行列（identity transform）になっており、これを各種の変換メソッドで自由に調整することで、図形の拡大縮小・回転・移動などを柔軟に制御できます。

transform()メソッドによる行列の掛け合わせ

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

m11 m21 dx
m12 m22 dy
 0   0   1

各引数の役割は以下のとおりです。

  • m11： 水平方向のスケーリング（倍率）
  • m12： 垂直方向の傾斜（スキュー）
  • m21： 水平方向の傾斜（スキュー）
  • m22： 垂直方向のスケーリング（倍率）
  • dx： 水平方向の平行移動量
  • dy： 垂直方向の平行移動量

このメソッドは現在の変換状態を保持したまま新しい変換を累積的に追加するため、複数の変換を組み合わせた複雑な描画に適しています。

setTransform()メソッドで変換をリセット

setTransform(m11, m12, m21, m22, dx, dy) メソッドは、まず現在の変換を単位行列にリセットし、その後、同じ引数で transform() メソッドを呼び出します。つまり、それまでの変換をすべて破棄して、指定した変換だけを新しく適用したい場合に便利です。

サンプルコード：回転する正方形の描画

次のコードは、transform() を使って30度ずつ回転しながら色の濃さが変化する正方形を描画し、最後に 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;

          // 30度ずつ回転させながら正方形を描画
          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度回転に必要な三角関数の値を求めています。
  • ループ内で ctx.transform(cos, sin, -sin, cos, 0, 0) を呼び出すことで、毎回30度ずつ回転変換が累積され、風車のような模様が描かれます。
  • fillStyle のRGB値をループごとに変化させることで、グラデーションのような色の変化を実現しています。
  • 最後の setTransform(-1, 0, 0, 1, 200, 200) は、X軸方向に反転した座標系を原点(200, 200)に設定するもので、過去の変換を完全に上書きします。

このように transform() と setTransform() を使い分けることで、Canvas上での高度な図形変換を効率的に実装できます。

  1. HTML5 Canvasの変換（トランスフォーム）基本解説

    HTML5のCanvas APIには、変換行列（transformation matrix）を直接操作できるメソッドが用意されています。変換行列は初期状態で単位変換（identity transform）となっており、その後、各種の変換メソッドを呼び出すことで自由に調整できます。 主な変換メソッド translate(x, y)：座標原点を指定した位置へ移動します。 rotate(angle)：指定した角度（ラジアン）だけ描画内容を回転させます。 scale(x, y)：横方向・縦方向に拡大・縮小します。 transform(a, b, c, d, e, f)：現在の変換行列に、指定した行列

  2. HTML5でCanvas（キャンバス）を中央に配置する方法を徹底解説

    HTML5で<canvas>要素を画面の中央に配置する最もシンプルな方法は、canvasタグを<div>タグで囲み、そのdivに対して中央揃え（text-align:center）を指定することです。親要素であるdivが中央に配置されると、その中にあるcanvasも自動的に中央に表示されます。基本的な実装例<!DOCTYPE html> <html>    <body>       <div style=text-align:center;