Wo sind die Koordinaten der Canvas-Maus?

So erhalten Sie Mauskoordinaten im Canvas: 1. Erstellen Sie eine JavaScript-Beispieldatei. 2. Rufen Sie einen Verweis auf das Canvas-Element ab und fügen Sie einen Listener für Mausbewegungsereignisse hinzu. 3. Wenn sich die Maus auf dem Canvas bewegt, wird dies von der getMousePos-Funktion ausgeführt 4. Verwenden Sie die Methode „getBoundingClientRect()“, um die Positions- und Größeninformationen des Canvas-Elements abzurufen und die Mauskoordinaten über event.clientX und event.clientY abzurufen.

Die Betriebsumgebung dieses Tutorials: Windows-System, Dell G3-Computer.

Canvas ist ein Element in HTML5, das zum Zeichnen von Grafiken, Animationen und anderen visuellen Effekten auf Webseiten verwendet wird. Im Gegensatz zu anderen HTML-Elementen verfügt Canvas nicht über ein eigenes Koordinatensystem. Es verwendet das Koordinatensystem der Webseite, also das Koordinatensystem mit der oberen linken Ecke als Ursprung.

In Canvas ist die Koordinatenposition der Maus relativ zur Koordinatenposition der gesamten Webseite. Wenn sich die Maus auf der Leinwand bewegt, kann die Koordinatenposition der Maus durch Ereignisüberwachung ermittelt werden.

Zuerst müssen wir einen Listener für Mausbewegungsereignisse auf der Leinwand hinzufügen. Um diese Funktionalität zu erreichen, kann JavaScript verwendet werden. Das Folgende ist ein Beispielcode:

javascript
var canvas = document.getElementById("myCanvas");
canvas.addEventListener("mousemove", getMousePos);
function getMousePos(event) {
  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left;
  var y = event.clientY - rect.top;
  console.log("鼠标坐标：x=" + x + ", y=" + y);
}

Im obigen Code erhalten wir zunächst einen Verweis auf das Canvas-Element und fügen einen Listener für Mausbewegungsereignisse hinzu. Wenn sich die Maus auf dem Canvas bewegt, wird die Funktion getMousePos ausgelöst.

In der Funktion getMousePos verwenden wir zunächst die Methode getBoundingClientRect(), um die Positions- und Größeninformationen des Canvas-Elements abzurufen. Ermitteln Sie dann über event.clientX und event.clientY die Koordinatenposition der Maus relativ zur gesamten Webseite. Schließlich wird die Koordinatenposition der Maus relativ zum Canvas durch Subtrahieren der Koordinaten der oberen linken Ecke des Canvas-Elements, also rect.left und rect.top, ermittelt.

Im obigen Code verwenden wir die Funktion console.log(), um die Koordinatenposition der Maus an die Konsole des Browsers auszugeben. Sie können Koordinatenpositionen bei Bedarf auch für andere Vorgänge verwenden, z. B. zum Zeichnen von Grafiken oder zum Durchführen von Animationen.

Zusammenfassend sind die Canvas-Mauskoordinaten relativ zur Koordinatenposition der gesamten Webseite. Durch Ereignis-Listener und einige Berechnungen können wir die Koordinatenposition der Maus auf der Leinwand ermitteln und damit verschiedene interaktive Effekte erzielen.

Das obige ist der detaillierte Inhalt vonWo sind die Koordinaten der Canvas-Maus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!