Wie kann ich Mausklickkoordinaten auf einem Canvas-Element abrufen?

Koordinaten von Mausklicks auf ein Canvas-Element ermitteln

Das Bestimmen der Koordinaten von Mausklicks auf ein Canvas-Element ist für verschiedene Anwendungen von entscheidender Bedeutung. Hier ist eine browserübergreifende Lösung, die in Safari, Opera und Firefox funktioniert:

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

Dieses Code-Snippet verwendet die Methode getBoundingClientRect(), um die Position des Canvas-Elements innerhalb des Dokuments zu ermitteln. Anschließend werden die X- und Y-Koordinaten des Mausklicks relativ zum Ursprung des Canvas-Elements berechnet.

Durch Hinzufügen eines Ereignis-Listeners für das Mousedown-Ereignis können Sie Mausklicks erfassen und die Koordinaten mithilfe der Funktion getCursorPosition abrufen. Diese Informationen können für verschiedene Zwecke weiterverarbeitet werden, beispielsweise zur Objektmanipulation oder zur Benutzerinteraktion innerhalb des Canvas-Elements.

Das obige ist der detaillierte Inhalt vonWie kann ich Mausklickkoordinaten auf einem Canvas-Element abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!