Où sont les coordonnées de la souris sur le canevas ?

Comment obtenir les coordonnées de la souris dans le canevas : 1. Créez un exemple de fichier JavaScript ; 2. Obtenez une référence à l'élément Canvas et ajoutez un écouteur pour les événements de mouvement de la souris. 3. Lorsque la souris se déplace sur le canevas, la fonction getMousePos ; être déclenché ; 4. . Utilisez la méthode "getBoundingClientRect()" pour obtenir les informations de position et de taille de l'élément Canvas, et obtenez les coordonnées de la souris via event.clientX et event.clientY.

L'environnement d'exploitation de ce tutoriel : système Windows, ordinateur Dell G3.

Canvas est un élément HTML5 utilisé pour dessiner des graphiques, des animations et d'autres effets visuels sur des pages Web. Contrairement aux autres éléments HTML, Canvas ne possède pas son propre système de coordonnées. Il utilise le système de coordonnées de la page Web, qui est le système de coordonnées avec le coin supérieur gauche comme origine.

Dans Canvas, la position des coordonnées de la souris est relative à la position des coordonnées de l'ensemble de la page Web. Lorsque la souris se déplace sur le canevas, la position des coordonnées de la souris peut être obtenue grâce à l'écoute d'événements.

Tout d'abord, nous devons ajouter un écouteur pour les événements de mouvements de souris sur le canevas. JavaScript peut être utilisé pour réaliser cette fonctionnalité. Voici un exemple de code :

javascript
var canvas = document.getElementById("myCanvas");
canvas.addEventListener("mousemove", getMousePos);
function getMousePos(event) {
  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left;
  var y = event.clientY - rect.top;
  console.log("鼠标坐标：x=" + x + ", y=" + y);
}

Dans le code ci-dessus, nous obtenons d'abord une référence à l'élément Canvas et ajoutons un écouteur pour les événements de mouvement de la souris. Lorsque la souris se déplace sur le Canvas, la fonction getMousePos est déclenchée.

Dans la fonction getMousePos, nous utilisons d'abord la méthode getBoundingClientRect() pour obtenir les informations de position et de taille de l'élément Canvas. Ensuite, obtenez la position des coordonnées de la souris par rapport à l'ensemble de la page Web via event.clientX et event.clientY. Enfin, la position des coordonnées de la souris par rapport au Canvas est obtenue en soustrayant les coordonnées du coin supérieur gauche de l'élément Canvas, c'est-à-dire rect.left et rect.top.

Dans le code ci-dessus, nous utilisons la fonction console.log() pour afficher la position des coordonnées de la souris sur la console du navigateur. Vous pouvez également utiliser les positions des coordonnées pour d'autres opérations selon vos besoins, telles que dessiner des graphiques ou réaliser des animations.

En résumé, les coordonnées de la souris Canvas sont relatives à la position des coordonnées de l'ensemble de la page Web. Grâce aux écouteurs d'événements et à certains calculs, nous pouvons obtenir la position des coordonnées de la souris sur le canevas et l'utiliser pour obtenir divers effets interactifs.

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!