Wie erhalte ich Mausklick-Koordinaten für ein Canvas-Element?

Mausklickkoordinaten auf einem Canvas-Element abrufen

Um die X- und Y-Koordinaten eines Mausklicks relativ zu einem Canvas-Element zu erhalten, folgen Sie den Anweisungen Diese Schritte:

1. Definieren Sie das Ereignis Handler:

   canvas.addEventListener('mousedown', function(e) {
       // Code to get cursor position
   })

   Nach dem Login kopieren

2. Cursorposition berechnen:
   Verwenden Sie im Ereignishandler die Methode getBoundingClientRect(), um die Position der Leinwand relativ zu ermitteln auf den Bildschirm und subtrahieren Sie dann die Klickereigniskoordinaten davon, um das Relative zu finden Position:

   const rect = canvas.getBoundingClientRect()
   const x = event.clientX - rect.left
   const y = event.clientY - rect.top

   Nach dem Login kopieren

3. Koordinaten protokollieren:
   Abschließend können Sie die Koordinatenwerte an die Konsole ausgeben oder in Ihrem verwenden Anwendung:

   console.log("x: " + x + " y: " + y)

   Nach dem Login kopieren

Beispiel:

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

Diese Lösung bietet browserübergreifende Kompatibilität für Safari, Opera und Firefox. Für die Unterstützung älterer Browser sollten Sie die Verwendung von jQuery oder einer browserübergreifenden Bibliothek in Betracht ziehen.

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