HTML5のCanvasとSVGを使ってグリッドを描画する方法

HTML5のCanvasとSVGを使ってグリッドを描画する方法

Webページ上に格子状のグリッドを描画したい場合、HTML5の<canvas>要素を使う方法と、SVGを使う方法の2つが代表的です。この記事では、まずCanvasを使った基本的なグリッド描画の手順をコード例とともに解説します。

1. グリッドとキャンバスのサイズを定義する

最初に、グリッドの幅と高さ、そして周囲の余白（パディング）を変数として定義します。キャンバスのサイズは「グリッドサイズ＋余白×2」として算出します。その後、<canvas>要素を生成してbodyに追加し、2Dコンテキストを取得しましょう。

// グリッドの幅と高さを設定
var grid_w = 200;
var grid_h = 200;

// グリッドの周囲に余白を設定
var gridp = 15;

// 幅と高さからキャンバスのサイズを定義
var canvas_w = grid_w + (gridp*2) + 1;
var canvas_h = grid_h + (gridp*2) + 1;

// キャンバス要素を作成してbodyに追加し、コンテキストを取得
var canvas = $('<canvas/>').attr({width: canvas_w, height: canvas_h}).appendTo('body');
var ctx = canvas.get(0).getContext("2d");

2. グリッドを描画するメソッド

次に、実際に線を引くための関数を定義します。moveTo()で線の開始点へ移動し、lineTo()で終点まで直線を定義します。縦線と横線をそれぞれ50ピクセル間隔でループ処理することで、均等なグリッドが描けます。

function drawBoard(){
  // 縦線を50px間隔で描画
  for (var a = 0; a <= grid_w; a += 50) {
    ctx.moveTo(0.5 + a + gridp, gridp);
    ctx.lineTo(0.5 + a + gridp, grid_h + gridp);
  }

  // 横線を50px間隔で描画
  for (var b = 0; b <= grid_h; b += 50) {
    ctx.moveTo(gridp, 0.5 + b + gridp);
    ctx.lineTo(grid_w + gridp, 0.5 + b + gridp);
  }

  // 定義したパスを実際に描画
  ctx.strokeStyle = "#000";
  ctx.stroke();
}
drawBoard();

実装のポイント

• 0.5のオフセット： 座標に0.5を加えることで、線がぼやけずシャープに表示されます。Canvasは座標をピクセルの境界ではなく中心として扱うため、この調整が有効です。
• stroke()の呼び出し： moveTo()やlineTo()はあくまでパスの定義であり、実際に画面へ描画されるのはstroke()を実行したタイミングです。

SVGを使ってグリッドを描く場合

SVGを利用すれば、JavaScriptを使わずにHTML内へ直接記述するだけでグリッドを実現できます。<pattern>要素で格子パターンを定義し、矩形に塗り適用するのが定番の手法です。ベクター形式のため拡大縮小しても劣化しないのも大きな利点です。

<svg width="230" height="230" xmlns="https://www.w3.org/2000/svg">
  <defs>
    <pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse">
      <path d="M 50 0 L 0 0 0 50" fill="none" stroke="black"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#grid)"/>
</svg>

まとめ

間隔やサイズを動的に変更したり、マウス操作と連動させたい場合はCanvasが適しています。一方、静的な背景パターンやレスポンシブ対応を重視するならSVGが便利です。用途に応じて使い分けるとよいでしょう。