检索画布元素上的鼠标点击坐标
这个问题围绕着获取鼠标点击相对于画布元素的精确坐标。对于 Safari、Opera 和 Firefox 等现代浏览器，存在一种简化的解决方案，无需使用 jQuery。
所提供的 JavaScript 代码提供了一种雄辩的方法来完成此任务：
function getCursorPosition(canvas, event) {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
console.log("x: " + x + " y: " + y);
}
const canvas = document.querySelector('canvas');
canvas.addEventListener('mousedown', function(e) {
getCursorPosition(canvas, e);
});This代码通过利用 getBoundingClientRect() 方法并计算相对 x 和 y 坐标，有效地捕获鼠标单击位置。 console.log() 调用显示这些坐标，清楚地指示画布元素内的点击位置。
以上是如何在 JavaScript 中获取 Canvas 元素上的鼠标单击坐标？的详细内容。更多信息请关注PHP中文网其他相关文章！
