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

前端之家收集整理的这篇文章主要介绍了html5 – 使用getBoundingClientRect的canvas onclick坐标始终相同前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图使用getBoundingClientRect来获取我在画布上点击的坐标,但我总是得到相同的结果.

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

你可以看到我总是得到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);
    ...

Modified fiddle

猜你在找的HTML5相关文章