HTML5 Canvasでマルチクリックイベントを実装する方法

HTML5 Canvasでマルチクリックイベントを実装する方法

HTML5のCanvasは、図形そのものに対して個別のイベントハンドラを設定できません。しかしPath2Dオブジェクトを活用すれば、1つのキャンバス上に描いた複数の領域（パス）それぞれに対して、クリック判定を行うことが可能です。

例えば、円を描いてその一部を赤色、別の部分をグレー色で塗り分けたケースを考えてみましょう。赤色の部分がクリックされたときには「関数1」を呼び出し、グレーの部分がクリックされたときには「関数2」を呼び出します。これを実現するには、判定したい各領域を再利用可能なPath2Dオブジェクトとして保存しておく必要があります。

Path2Dオブジェクトでパス情報を保存する

Path2Dオブジェクトを使うと、パスの形状情報を個別に保持できます。複数のパスを配列に格納しておけば、あとから順番にヒット判定を回せるようになります。

// パスオブジェクトを作成
var path1 = new Path2D();
var path2 = new Path2D();

// ヒット判定用にパスを配列へ格納
var newpaths = [path1, path2];

// 赤色部分のパス（円弧を定義）
path1.arc(200, 85, 60, -0.2 * Math.PI, 2.7 * Math.PI);

// グレー部分のパス
path2.arc(200, 85, 60, 2.7 * Math.PI, -1.1 * Math.PI);

共通のコンテキストで異なるスタイルを適用して描画する

2つのパスオブジェクトは、同じコンテキスト（ctx1）を共有しながら、それぞれ異なるスタイルで描画できます。

ctx1.lineWidth = 16;
ctx1.strokeStyle = "#d43030";
ctx1.stroke(path1);   // 赤色で描画

ctx1.strokeStyle = "#b8b8b8";
ctx1.stroke(path2);   // グレーで描画

クリック座標の取得と関数の呼び出し

次に、共通のキャンバスにクリックイベントを設定し、クリックされた座標（x・y）をもとに、どのパスがヒットしたかを判定します。パスの配列を反復処理し、isPointInPath()メソッドで当たり判定を行い、ヒットしたパスに応じて対応する関数を呼び出します。

<canvas id="myCanvas1"></canvas>  // 対象のキャンバスを用意

// キャンバス内の相対座標を取得するヘルパー関数
function getXY(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

document.getElementById("myCanvas1").addEventListener("click", function(evt) {
  var pos = getXY(this, evt);

  // 各パスに対してヒット判定を実行
  if (ctx1.isPointInPath(path1, pos.x, pos.y)) {
    function1();  // 赤色部分がクリックされた場合
  } else if (ctx1.isPointInPath(path2, pos.x, pos.y)) {
    function2();  // グレー部分がクリックされた場合
  }
});

このように、Path2DとisPointInPath()を組み合わせることで、単一のキャンバス上でも描画領域ごとに異なるクリック処理を柔軟に実装できます。ボタンやインタラクティブなグラフなど、リッチなUIをCanvasで構築する際に非常に有効なテクニックです。