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

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

HTML5のCanvas APIには、変換行列（transformation matrix）を直接操作できるメソッドが用意されています。変換行列は初期状態で単位変換（identity transform）となっており、その後、各種の変換メソッドを呼び出すことで自由に調整できます。

主な変換メソッド

  • translate(x, y)：座標原点を指定した位置へ移動します。
  • rotate(angle)：指定した角度（ラジアン）だけ描画内容を回転させます。
  • scale(x, y)：横方向・縦方向に拡大・縮小します。
  • transform(a, b, c, d, e, f)：現在の変換行列に、指定した行列を掛け合わせます。
  • setTransform(a, b, c, d, e, f)：現在の変換行列をリセットし、指定した行列に置き換えます。

サンプルコード

以下は、Canvasの変換機能を使って図形を回転させながら描画する例です。30度（π/6ラジアン）ごとに正方形を回転・描画し、最後にsetTransform()で行列を設定し直して半透明の正方形を重ねています。

<!DOCTYPE HTML>
<html>
   <head>
      <script>
         function drawShape(){
            // DOMからcanvas要素を取得
            var canvas = document.getElementById('mycanvas');
            // canvas非対応ブラウザでは実行しない

            if (canvas.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;
               
               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>

コードのポイント

まずtranslate(200, 200)で原点をキャンバス中央付近に移動し、ループ内でtransform(cos, sin, -sin, cos, 0, 0)を呼び出すことで、毎回30度ずつ回転しながら濃度の異なるグレーの正方形を描画しています。これは回転行列を累積的に適用する典型的なパターンです。

その後、setTransform(-1, 0, 0, 1, 200, 200)によって変換行列をリセットし、水平方向に反転した新しい座標系を設定しています。最後に半透明の青色（rgba(100, 100, 255, 0.5)）の正方形を描画することで、変換の効果を視覚的に確認できます。

このように、変換行列を理解して使いこなすことで、回転・拡大縮小・反転などを組み合わせた柔軟なグラフィック表現が可能になります。

  1. HTML5のCanvas要素を印刷する方法【サンプルコード付き】

    HTML5 Canvas要素を印刷するには HTML5の<canvas>要素は、そのままの状態では印刷ダイアログから意図どおりに出力できないことがあります。そこで一般的なのが、Canvasの描画内容をPNG画像のデータURLに変換し、それを新しいブラウザウィンドウに表示してから印刷を実行するという手法です。 ここでは、代表的な2つの実装方法を紹介します。 方法1：printElementプラグインを使う jQueryのprintElement系プラグインを利用すると、Canvas要素をシンプルな記述で印刷できます。まず、HTML側に印刷用のリンクを配置します。 <a hre

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

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