Comment puis-je obtenir les coordonnées d'un clic de souris sur un élément du canevas ?

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

Pour obtenir les coordonnées x et y d'un clic de souris par rapport à un élément du canevas, suivez ces étapes :

1. Définir l'événement Gestionnaire :

   canvas.addEventListener('mousedown', function(e) {
       // Code to get cursor position
   })

   Copier après la connexion

2. Calculer la position du curseur :
   Dans le gestionnaire d'événements, utilisez la méthode getBoundingClientRect() pour obtenir la position relative du canevas. à l'écran, puis soustrayez-en les coordonnées de l'événement de clic pour trouver le relatif position :

   const rect = canvas.getBoundingClientRect()
   const x = event.clientX - rect.left
   const y = event.clientY - rect.top

   Copier après la connexion

3. Enregistrer les coordonnées :
   Enfin, vous pouvez afficher les valeurs de coordonnées sur la console ou les utiliser dans votre application :

   console.log("x: " + x + " y: " + y)

   Copier après la connexion

Exemple :

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top
    console.log("x: " + x + " y: " + y)
}

const canvas = document.querySelector('canvas')
canvas.addEventListener('mousedown', function(e) {
    getCursorPosition(canvas, e)
})

Cette solution offre une compatibilité entre navigateurs pour Safari, Opera et Firefox. Pour la prise en charge des navigateurs existants, envisagez d'utiliser jQuery ou une bibliothèque multi-navigateurs.

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!