Problème lié à l'obtention de coordonnées de souris précises : utilisation du canevas HTML5 lors du redimensionnement de la page

Question

Je voulais créer cet Pixel Effect à partir d'un expert front-end.

Alors que j'ai pu obtenir l'intégralité de l'effet pixel sur une toile plein écran :

const canvas = getElementById('canvas');

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

Et c'est facile d'obtenir les coordonnées de la souris

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

À ce stade, la largeur et la hauteur du canevas sont égales à celles du document, il est donc facile d'obtenir les coordonnées exactes de la souris. Mais quand j'essaie d'utiliser des dimensions d'une précision de 800px. Il existe également quelques problèmes liés au redimensionnement.

Je veux savoir comment maintenir la précision de la souris.

Merci beaucoup pour votre aide.

Answer 1

Je crois que lorsque vous utilisez e.x et e.y, même s'ils sont utilisés dans l'écouteur d'événements du canevas, ils renvoient les coordonnées de la souris par rapport au pixel supérieur gauche de la page entière, pas seulement les coordonnées du canevas. Si par "gâché", vous voulez dire que l'effet de pixel est décalé dans une direction fixe, peu importe où vous cliquez, alors c'est probablement votre problème et vous devriez remplacer e.x et e.y ​​par e.clientX et e.clientY . Le "client" dans e.clientX fait référence à l'élément ciblé par l'écouteur, et précise que les coordonnées de l'événement sont données par rapport à l'élément plutôt qu'à la page. Si la question se pose autrement, alors je suppose que je n'ai pas la réponse.