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ピクセル
という式です。