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.

Beachte: Die Hit Region API wurde aus dem WHATWG-Standard entfernt und wird von modernen Browsern nicht verlässlich unterstützt. Verwende sie nicht für neue Projekte.

Mit der Hit Region API konntest du Bereiche des canvas definieren und dort Interaktivität ermöglichen.

Chrome unterstützt Hit Regions hinter einer flag ExperimentalCanvasFeatures, sodass du sie zwar testen, aber nicht bei den Nutzern Ihrer Webseite voraussetzen kannst.

Methoden

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

Alternativen

Eine Alternative zu Hit Regions ist die Verwendung von Path2D-Objekten. In Verbindung mit der isPointInPath()-Methode kannst du Benutzereingaben mit einzelnen Elementen der canvas-Grafik verknüpfen. Speichere deine Pfade in einem Array, das du mit einem Positionsvergleich durchläufst. (Store each path in an array which you loop through using the position to test with.)

Besser unterstützt, aber aufwändiger, ist das erneute Erzeugen des Pfads mit anschließendem Vergleich über 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)

Weblinks

• WHATWG: addhitregion
• MDN: Hit regions