Comment puis-je obtenir des coordonnées précises de clic de souris sur un élément de canevas ?

Détermination des coordonnées des clics de souris sur les éléments du canevas

Récupérer les coordonnées précises des clics de souris dans un élément du canevas est un besoin courant dans diverses applications de programmation . Le guide suivant fournit une approche simple pour les navigateurs Web, notamment Safari, Opera et Firefox.

Solution multi-navigateurs

Pour obtenir une solution simple et multi-navigateurs, une fonction JavaScript nommée getCursorPosition peut être définie :

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

Cette fonction calcule les coordonnées relatives à l'élément canvas lui-même.

Gestion des événements

Pour attacher cette fonctionnalité à un élément de canevas, ajoutez un écouteur d'événement pour les événements avec la souris enfoncée :

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

Une fois un clic de souris est détecté, la fonction getCursorPosition est invoquée et les coordonnées x et y du clic sont enregistrées dans la console.

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!