javascript - 他の解像度の画面でマウス位置の同じ X と Y を使用するように HTML Canvas を作成する方法

Question

私のキャンバス ゲームには、別のメニューにリダイレクトするオンクリック ボタンがあります。別の解像度のモニターでキャンバスを開くと、すべての X と Y が変更され、何も機能しません。

Canvas が別のモニターから影響を受けるのをブロックする方法はありますか?

Answer 1

e.offsetXとを使用e.offsetY して、キャンバス上のマウス座標を取得します。

var canvas = document.getElementById("canvas"),
    c = canvas.getContext("2d");
canvas.addEventListener('click', handleClick);
canvas.addEventListener('mousemove', handleClick);

function handleClick(e) {
    e = e || window.event;
    console.log(e.offsetX, e.offsetY);
}