Question

我有一个canvas元素，当我点击它时，我得到了e.clientX（Y）或e.screenX（Y）的点击位置。发生了一些奇怪的事情。 Y值总是太高。请看这张图片：http://img840.imageshack.us/img840/268/eventq.jpg。任何想法为什么这么高？

Answer 1

您只需要使用ClientX和Y并从中减去画布的位置。

这个例子是不必要的冗长，只是为了显示步骤：

var canvas = document.getElementById('game');
var canvasX, canvasY;

canvas.addEventListener('click', function(event) {
    canvasX = canvas.offsetLeft;
    canvasY = canvas.offsetTop;
    var eventX = event.clientX;
    var eventY = event.clientY;
    var relX = eventX - canvasX;
    var relY = eventY - canvasY;
    alert('X = ' + relX + ', Y = ' + relY);
});

工作样本：http://jsfiddle.net/JfhJF/

Answer 2

我很确定你能说出发生了什么。您没有相对于画布的坐标，而是相对于视口的坐标。它还取决于您的浏览器是否包含填充。

将它们转换为法线坐标。在您的情况下，这涉及减去画布的偏移量。

点击事件位置（Y）太高

2 个答案: