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

Mausklickkoordinaten auf einem Canvas-Element abrufen

Bei dieser Frage geht es darum, die genauen Koordinaten eines Mausklicks relativ zu einem Canvas-Element zu ermitteln. Für moderne Browser wie Safari, Opera und Firefox gibt es eine optimierte Lösung, die jQuery überflüssig macht.

Der bereitgestellte JavaScript-Code bietet einen eloquenten Ansatz für diese Aufgabe:

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

Dies Code erfasst effizient die Mausklickposition, indem er die Methode getBoundingClientRect() nutzt und die relativen x- und y-Koordinaten berechnet. Der Aufruf von console.log() zeigt diese Koordinaten an und liefert so einen klaren Hinweis auf die Position des Klicks innerhalb des Canvas-Elements.

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