如何取得 HTML5 Canvas 上的滑鼠點擊座標？

取得畫布元素上的滑鼠點選座標

要捕捉滑鼠在畫布元素上點選的座標，請依照下列步驟操作：

取得畫布元素

使用DOM 選擇器定位並存取畫布元素。

新增事件監聽器

將事件監聽器附加到畫布監聽滑鼠點擊。

處理事件

在事件處理程序中，使用 getBoundingClientRect() 方法擷取畫布元素在螢幕上的位置。

計算座標

畫布位置減去點擊的客戶端座標，即可得到畫布內的相對座標canvas.

範例程式碼：

const canvas = document.querySelector('canvas');

canvas.addEventListener('mousedown', function(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  console.log(`Coordinates: X: ${x}, Y: ${y}`);
});

此解方案既簡單又跨瀏覽器相容，確保它在Safari、Opera 和Firefox 中有效運作。

以上是如何取得 HTML5 Canvas 上的滑鼠點擊座標？的詳細內容。更多資訊請關注PHP中文網其他相關文章！