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

Obtention des coordonnées des clics de souris sur un élément de canevas

La détermination des coordonnées des clics de souris sur un élément de canevas est cruciale pour diverses applications. Voici une solution multi-navigateurs qui fonctionne dans Safari, Opera et Firefox :

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

Cet extrait de code utilise la méthode getBoundingClientRect() pour obtenir la position de l'élément canevas dans le document. Il calcule ensuite les coordonnées x et y du clic de souris par rapport à l'origine de l'élément canevas.

En ajoutant un écouteur d'événement pour l'événement mousedown, vous pouvez capturer les clics de souris et récupérer les coordonnées à l'aide de la fonction getCursorPosition. Ces informations peuvent être traitées ultérieurement à diverses fins, telles que la manipulation d'objets ou l'interaction de l'utilisateur au sein de l'élément canevas.

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!