Wie kann ich präzise Mausklick-Koordinaten für ein Canvas-Element erhalten?

Bestimmen von Mausklickkoordinaten auf Canvas-Elementen

Das Abrufen der genauen Koordinaten von Mausklicks innerhalb eines Canvas-Elements ist in verschiedenen Programmieranwendungen ein häufiger Bedarf . Die folgende Anleitung bietet einen unkomplizierten Ansatz für Webbrowser, einschließlich Safari, Opera und Firefox.

Browserübergreifende Lösung

Um eine einfache und browserübergreifende Lösung zu erreichen, Es kann eine JavaScript-Funktion namens getCursorPosition definiert werden:

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

Diese Funktion berechnet die Koordinaten relativ zum Canvas-Element selbst.

Ereignisbehandlung

Um diese Funktionalität an ein Canvas-Element anzuhängen, fügen Sie einen Ereignis-Listener für Mouse-Down-Ereignisse hinzu:

const canvas = document.querySelector('canvas');
canvas.addEventListener('mousedown', function(e) {
    getCursorPosition(canvas, e);
});

Einmal Ein Mausklick wird erkannt, die Funktion getCursorPosition wird aufgerufen und die x- und y-Koordinaten des Klicks werden in der Konsole protokolliert.

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