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

Question

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

我的代码在这里：http://fiddle.jshell.net/nH74F/1/

你可以看到我总是得到8,8

不知道为什么，还有另一种获取此信息的方法吗？

Answer 1

那是因为你总是使用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);
    ...

<强> Modified fiddle