javascript - カーソルの相対座標を取得するには?

Question

キャンバスを持っています。また、左ボタンが押されたときに、キャンバスの左上隅を基準としたカーソルの座標を取得する必要があります。しかし、Javascript が提供するのはclientX、clientY、screenXおよびだけscreenYです。これを計算してみました。ただし、clientX、clientY、screenXまたはscreenYはキャンバスに使用できません。

Answer 1

キャンバスがあると仮定します

<canvas id="myCanvas"></canvas>

最初にキャンバスの位置を取得できます

var element = document.getElementById('myCanvas');
var rect = element.getBoundingClientRect();

これにより、上、右、下、左のプロパティを持つオブジェクトが得られます。したがって、左上隅を基準としたカーソルの座標を計算するには、clientX と clientY の左上の X 座標と Y 座標からそれを差し引くだけです。

var canvasCursor = { top: clientY - rect.top,
                    left: clientX - rect.left }