Mausposition mit Javascript innerhalb der Leinwand erhalten
Ich studiere jQuery und HTML5 Canvas. Alles, was ich tun möchte, ist ein einfaches HTML5-Beispiel. Wenn sich die Maus bewegt, zeichne ich rote Quadrate unter meine Maus.
Mein Code ist einfach, aber ich habe ein Problem damit, die Mauszeigerposition innerhalb der Zeichenfläche zu finden.
Im Moment benutze ich x = event.offsetX; um die Mausposition zu erhalten. Das funktioniert sehr gut in Chrome, aber wenn es um Firefox geht, funktioniert es nicht. Ich habe den Code in x = event.layerX geändert. aber es scheint, dass layerX die Position meiner Maus relativ zur Webseite ist, nicht die Position der Leinwand. weil ich immer einen Offset sehe.
Ich habe zwei Fragen, zuerst, was ist das Richtige zu tun, um die richtige Mausposition unter Firefox zu bekommen. Zweitens, wie kann ich einen Code schreiben, der für IE, Firefox, Chrome, Safari und Oper funktioniert?
hier ist mein Code:
%Vor%3 Antworten
Sie benötigen eine benutzerdefinierte Funktion, um herauszufinden, wo sich das Element befindet, und herauszufinden, wo sich die Maus in diesem Element befindet. Hier ist ein Beispiel . Es verwendet diese Funktion aus dem Quirks-Modus und meiner JavaScript-Bibliothek, die nicht schwer in jQuery zu übersetzen sein sollte.
%Vor%BEARBEITEN
Dies funktioniert nicht im IE, da pageX nicht unterstützt wird. Sie müssen das Ereignisobjekt über eine Funktion wie dies übergeben, um dies zu korrigieren . Aber, wie 2x2p1p sagte, Canvas wird von keinem Internet Explorer unter Version 9 unterstützt.
Tags und Links javascript html5 canvas