画布和鼠标位置不对齐

Question

所以我有了这个小项目和代码，

https://jsfiddle.net/Urrby/bhdx6o3L/

问题是我无法让线与鼠标尖端匹配，光标和绘制的线之间总是有空间。我知道这已经被问了 100 次，但我不明白如何调整画布和窗口和鼠标位置的大小以匹配。我不只是在寻找解决方案，如果有人可以将其简化并解释为什么这不起作用，以及我必须解决的问题是什么，那就太好了。我真的迷路了。

这是JS代码

let coord = { x: 0, y: 0 };

function resize() {
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
  }
  


  function start(event) {
    document.addEventListener("mousemove", draw);
    reposition(event);
  }

  function reposition(event) {
    coord.x = (event.clientX - canvas.offsetLeft);
    coord.y = (event.clientY - canvas.offsetTop);
  }

  function stop() {
    document.removeEventListener("mousemove", draw);
  }

  function draw(event) {
    ctx.beginPath();
    ctx.moveTo(coord.x, coord.y);
    reposition(event);
    ctx.lineTo(coord.x, coord.y);
    ctx.stroke();
  }

提前感谢您的帮助。

Answer 1

您的主要问题是您在 CSS 中设置了画布的宽度和高度（在几个地方，宽度设置为 900 像素，最后您将其设置为 100vw）。

把这些拿出来，让JS设置的width和height属性就可以了。

如果你这样做，你会发现你的光标和线是在一起的。如果您移开光标“手”，您应该会在正在绘制的线条上看到光标的普通点。

因为您使用了一种图标作为光标，所以您必须将其相对于正常光标位置移动，因为此时它看起来好像是铅笔的顶部，而不是正在绘图的笔尖.