画布和鼠标位置不对齐

编程问答 2022-05-20

问题描述

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

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();
  }

预先感谢您的帮助。

解决方法

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

去掉这些，这样宽度和高度属性的 JS 设置就可以完成它们的工作。

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

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

canvashtml5-canvasjavascriptoffsetoffset