使用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);
    ...

修改小提琴