Comment obtenir les coordonnées d'un clic de souris sur un canevas HTML5 ?

Obtention des coordonnées d'un clic de souris sur un élément de canevas

Pour capturer les coordonnées d'un clic de souris sur un élément de canevas, procédez comme suit :

Obtenir l'élément Canvas

Localiser et accéder à l'élément Canvas à l'aide des sélecteurs DOM.

Ajouter un écouteur d'événement

Attachez un écouteur d'événement au canevas pour écouter les clics de souris.

Gérer le Event

Dans le gestionnaire d'événements, utilisez la méthode getBoundingClientRect() pour récupérer la position de l'élément canevas sur l'écran.

Calculer les coordonnées

Soustrayez les coordonnées client du clic de la position du canevas pour obtenir les coordonnées relatives dans le canevas.

Exemple de code :

const canvas = document.querySelector('canvas');

canvas.addEventListener('mousedown', function(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  console.log(`Coordinates: X: ${x}, Y: ${y}`);
});

Cette solution est à la fois simple et compatible avec tous les navigateurs, garantissant qu'il fonctionne efficacement dans Safari, Opera et Firefox.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!