Html 使用getBoundingClientRect的canvas onclick坐标始终相同

我试图使用getBoundingClientRect来获取我在画布上单击的坐标，但总是得到相同的结果

我的代码在这里：

正如你所看到的，我总是得到8,8

---

不知道为什么，还有其他方法获取此信息吗？

这是因为您总是使用由

getBoundingClientRect

返回的元素的绝对位置，而不是鼠标位置

请尝试以下方法：

canvas.addEventListener('click', function(e) {  // use event argument

    var rect = canvas.getBoundingClientRect();  // get element's abs. position
    var x = e.clientX - rect.left;              // get mouse x and adjust for el.
    var y = e.clientY - rect.top;               // get mouse y and adjust for el.

    alert('Mouse position: ' + x + ',' + y);
    ...