キャンバス要素を基準としたマウス座標を取得するにはどうすればよいですか?

キャンバス要素を基準としたマウス座標の取得

シンプルなキャンバスベースのペイント アプリケーションを作成する際の一般的な課題の 1 つは、キャンバス上のマウスの位置。

解決策

これを解決する 1 つのアプローチは、BoundingClientRect プロパティを利用することです。これは次のように実装できます。

<code class="javascript">document.getElementById('clickme').onclick = function(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;
  console.log("Left: " + x + " ; Top: " + y + ".");
};</code>

例

<code class="html"><div id="clickme">
  Click Me -<br>
  (this box has margin-left: 100px; margin-top: 20px;)
</div></code>

説明

1. 要素 clickme をマウスでクリックすると、onclick イベント ハンドラーがトリガーされます。
2. getBoundingClientRect() メソッドは、ビューポートを基準とした要素の位置とサイズを取得します。
3. e.clientX および e.clientYプロパティは、ビューポート内のマウスの絶対位置を表します。
4. これらの絶対座標からrect.leftとrect.topを減算することで、要素の左上隅を基準としたマウスの位置が得られます。

以上がキャンバス要素を基準としたマウス座標を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。