JavaScript»ゲーム制作»clickイベント クリックされた点の座標を表示する

ファイル名: js-game/quest_00723.html

下のプログラムをうつして、マウスでクリックされた点の座標ざひょうを画面がめんの右下に表示ひょうじしてください。

ソースコード

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

canvas.addEventListener("click", (e) => {

  // キャンバス左上の点からみた、クリックされた位置の座標
  const rect = e.target.getBoundingClientRect();
  const x = e.clientX - rect.left - 1;
  const y = e.clientY - rect.top - 1;

  context.clearRect(0, 0, 320, 320);
  context.fillText("(x:" + x + ", y:" + y + ")", 240, 310);
});

解説

addEventListener()は、1番目に設定したイベント（このコードではclick）が起きたとき、2番目に設定した関数を実行します。クリックされた点が引数eとなります。
getBoundingClientRectが返す位置は、ブラウザのウィンドウの現在見えている部分（=ビューポート）に対する位置です。今回の場合、キャンバスの左端がビューポートの左端からどれだけ離れているかをあらわす距離がrect.leftになります。
clientXはビューポートの左端からクリックされた位置の距離をあらわします。つまりビューポートの左上を基準として、
x = クリックされた点のx座標 – キャンバス左端のx座標 – キャンバスのふち1ピクセル
という式です。