Comment obtenir les coordonnées d'un clic de souris sur un élément Canvas en JavaScript ?

Récupération des coordonnées d'un clic de souris sur un élément du canevas

Cette question tourne autour de l'obtention des coordonnées précises d'un clic de souris par rapport à un élément du canevas. Pour les navigateurs modernes comme Safari, Opera et Firefox, il existe une solution simplifiée qui évite d'avoir recours à jQuery.

Le code JavaScript fourni offre une approche éloquente de cette tâche :

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

Ceci le code capture efficacement la position du clic de la souris en exploitant la méthode getBoundingClientRect() et en calculant les coordonnées relatives x et y. L'appel console.log() affiche ces coordonnées, fournissant une indication claire de l'emplacement du clic dans l'élément canvas.

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!