JavaScript/Canvas/Hit Region

Eine mit canvas gezeichnete Grafik besteht nicht wie SVG aus einzelnen Elementen und deshalb ist es schwierig zu ermitteln, ob Benutzerinteraktionen wie Mausklicks innerhalb eines bestimmten Teils der Grafik stattfinden. Mit der Hit Region API können Sie Bereiche des canvas definieren und dort Interaktivität zu ermöglichen.

Chrome unterstützt Hit Regions hinter einer flag ExperimentalCanvasFeatures, sodass Sie es zwar testen, aber nicht bei den Nutzern Ihrer Webseite voraussetzen können.

Methoden

• CanvasRenderingContext2D.addHitRegion(): fügt dem canvas eine Hit Region hinzu
• CanvasRenderingContext2D.removeHitRegion() entfernt eine Hit Region mit der angegebenen id
• CanvasRenderingContext2D.clearHitRegions(): entfernt alle Hit Regions

Alternativen

Eine Alternative zu Hit Regions ist die Verwendung von Path2D-Objekten. In Verbindung mit der isPointInPath()-Methode können Sie Benutzereingaben mit einzelnen Elementen der canvas-Grafik verknüpfen. Speichern Sie Ihre Pfade in einem Array, den Sie mit einem Positionsvergleich durchlaufen. (Store each path in an array which you loop through using the position to test with.)

Bessere Browserunterstützung, dafür aber mehr Arbeit macht ein erneutes Erzeugen des Pfades und direkt folgendem Vergleich mit isPointInPath(), um zu überprüfen, ob sich die Mausposition innerhalb des gewünschten Bereichs befindet. Bei einfachen Formen wie Rechtecken und Kreisen ist diese Methode am einfachsten umzusetzen.

• Animation
• Canvas (Übersicht)

Quellen

Weblinks

• WHATWG: addhitregion
• MDN: Hit regions