Wie erhalte ich Mausklick-Koordinaten auf einer HTML5-Leinwand?

Erhalten von Mausklick-Koordinaten auf einem Canvas-Element

Um die Koordinaten eines Mausklicks auf einem Canvas-Element zu erfassen, führen Sie die folgenden Schritte aus:

Besorgen Sie sich das Canvas-Element

Suchen Sie das Canvas-Element und greifen Sie darauf zu unter Verwendung von DOM-Selektoren.

Ereignis-Listener hinzufügen

Fügen Sie einen Ereignis-Listener an die Leinwand an, um auf Mausklicks zu warten.

Behandeln Sie die Ereignis

Verwenden Sie im Ereignishandler die Methode getBoundingClientRect(), um die Position von abzurufen das Leinwandelement auf dem Bildschirm.

Berechnen Sie die Koordinaten

Subtrahieren Sie die Client-Koordinaten des Klicks von der Leinwandposition, um die relativen Koordinaten innerhalb der Leinwand zu erhalten.

Beispielcode:

const canvas = document.querySelector('canvas');

canvas.addEventListener('mousedown', function(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  console.log(`Coordinates: X: ${x}, Y: ${y}`);
});

Diese Lösung ist sowohl einfach als auch Browserübergreifend kompatibel, um sicherzustellen, dass es effektiv in Safari, Opera und Firefox funktioniert.

Das obige ist der detaillierte Inhalt vonWie erhalte ich Mausklick-Koordinaten auf einer HTML5-Leinwand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!