在画布中预留Y坐标

Question

我正在测试Javascript中的canvas中的鼠标位置。

我决定尝试一下：我想在鼠标点击的位置绘制一个矩形，但是当我点击画布上的任意位置时，矩形会在光标的X位置绘制，但不是在Y。

然后我去看看问题是什么，所以我做了它，以便canvas上的鼠标坐标可见，我得到了有趣的结果。

简而言之：它告诉我的光标Y位置为0，即使它不在canvas的顶部：

ctx.canvas.addEventListener('mousemove', function(event) {
  var mouseX = event.clientX - ctx.canvas.offsetLeft;
  var mouseY = event.clientY - ctx.canvas.offsetTop;
  var status = document.getElementById('status');
  status.innerHTML = mouseX + ' | ' + mouseY;
});

ctx.canvas.addEventListener('click', function(event) {
  var mouseX = event.clientX - ctx.canvas.offsetLeft;
  var mouseY = event.clientY - ctx.canvas.offsetTop;
  item.drawItem(mouseX, mouseY);
});

有谁能告诉我为什么会这样？

Answer 1

使用ctx.canvas.offsetLeft代替canvas.getBoundingClientRect().top和ctx.canvas.offsetTop代替{{1}}。看看这是否有效？