javascript - 嘿!我试图让十字准线跟随我的鼠标，但 e.mouseX 和 e.mouseY 无法准确工作

Question

这是我的代码:

const canv = document.getElementById('canvas');
const ctxt = canv.getContext('2d');
const w = canv.width;
const h = canv.height;
canv.addEventListener('mousemove', e => {
  ctxt.clearRect(0, 0, canvas.width, canvas.height);
  drawLine(e.clientX, 0, e.clientX, h);
  drawLine(0, e.clientY, w, e.clientY);
})
function drawLine(x1, y1, x2, y2) {
  ctxt.beginPath();
  ctxt.moveTo(x1, y1);
  ctxt.lineTo(x2, y2);
  ctxt.stroke();
}

canvas {
  border: 1px solid black;
  width: 100%;
  height: 100%;
}

<canvas id='canvas'></canvas>

e.clientX 和 e.clientY 无法正常工作(运行代码)。我该如何解决这个问题？

Answer 1

首先，您不应该使用 CSS 来设置 Canvas 的大小，而应该使用属性 width 和 height。

其次，您应该使用相对鼠标位置(相对于 Canvas )，以便十字准线准确。为此，我们将使用 other SO answer 中的代码.

具体做法如下:

const canv = document.getElementById('canvas');
const ctxt = canv.getContext('2d');
const w = canv.width;
const h = canv.height;

const rect = canv.getBoundingClientRect();

canv.addEventListener('mousemove', e => {

  const x = e.pageX - rect.left;
  const y = e.pageY - rect.top;

  ctxt.clearRect(0, 0, canvas.width, canvas.height);
  ctxt.beginPath();
  ctxt.moveTo(0, y);
  ctxt.lineTo(w, y);
  ctxt.moveTo(x, 0);
  ctxt.lineTo(x, h);
  ctxt.stroke();
});

/* drawLine is really not necessary */

canvas {
  border: 1px solid black;
  /* no sizing here */
}

<canvas id='canvas' width="640" height="480"></canvas>

注意:使用 pageX 和 pageY 而不是 clientX 和 clientY，这样如果涉及滚动，您仍然可以获得准确的跟踪。 clientX 和 clientY 不考虑滚动，而 pageX 和 pageY 则考虑滚动。