Problem mit nicht genauen Mauskoordinaten: Verwendung von HTML5-Canvas beim Ändern der Seitengröße

Question

Ich wollte diesen Pixeleffekt von einem Frontend-Experten erstellen.

Während ich den gesamten Pixeleffekt auf einer Vollbild-Leinwand erzielen konnte:

const canvas = getElementById('canvas');

canvas.height = window.innerHeight; // 给画布设置全屏高度
canvas.width= window.innerWidth; // 给画布设置全屏宽度

Und es ist ganz einfach, die Koordinaten der Maus zu ermitteln

const mouse = {
  x: undefined,
  y: undefined
}
canvas.addEventListner('mousemove', function(e) {
  mouse.x = e.x;
  mouse.y = e.y;
}

Zu diesem Zeitpunkt stimmen Breite und Höhe der Leinwand mit dem Dokument überein, sodass Sie die genauen Koordinaten der Maus leicht ermitteln können. Aber wenn ich versuche, Abmessungen mit einer Genauigkeit von 800px zu verwenden. Es gibt auch einige Probleme im Zusammenhang mit der Größenänderung.

Ich möchte wissen, wie man die Mausgenauigkeit aufrechterhält.

Vielen Dank für Ihre Hilfe.

Answer 1

我相信当你使用e.x和e.y时，即使在canvas的事件监听器中使用，它们返回的是相对于整个页面左上角像素的鼠标坐标，而不仅仅是canvas的坐标。如果你所说的"messed up"是指无论你在哪里点击，像素效果都会以某个固定方向偏移，那么这可能是你的问题，你应该用e.clientX和e.clientY代替e.x和e.y。e.clientX中的"client"指的是监听器所针对的元素，并指定相对于该元素而不是页面给出事件坐标。如果以其他方式出现问题，那么我想我没有答案。