Hat das Canvas-Element den Gegenwert img's map, sodass Sie anklickbare Bereiche auf dem Canvas-Element definieren können?Hat (HTML5) Canvas das Äquivalent einer Imagemap?
Es gibt eine kurze Erwähnung einer Karte auf halber Seite hier: http://www.w3.org/TR/html5/the-canvas-element.html, aber ich kann nichts anderes darüber finden.
Maps auf Canvas sind derzeit ein offenes Problem mit HTML5. Ausgabe # 105 um genau zu sein. Siehe http://www.w3.org/html/wg/tracker/issues/105
Auch wenn es nicht, würde nicht eine Image-Map auf einem transparenten Bild über einer Leinwand erhalten Sie, was Sie brauchen?
Haben Sie in Betracht gezogen, Svg anstelle von Canvas zu verwenden? Mit svg kann die Grafik selbst alle Informationen enthalten, die Sie zum Identifizieren aktiver Regionen benötigen, und Sie können Ereignishandler genauso anhängen, wie Sie es bei HTML-Elementen tun würden.
Einige Beispiele, wie Sie Mausevents auf verschiedenen Teilen der Geometrie von svg Formen erkennen kann:
http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/interact-pevents-08-f.html
http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/interact-pevents-09-f.html
Als Lösung für Ihr Problem: Ich habe eine Click-Ereignis anhängen würde die Leinwand und im Maus-Event würde ich die Mauskoordinaten untersuchen, dann eine einfache Liste von Bereichen in Kombination mit Polygonen, an denen man eine Art Kollisionstest durchführen könnte. Rechtecke würden ein Anfang sein, aber wenn Sie wirklich spezielle Bereiche benötigen, würde ein fortgeschrittenerer Kollisionstest gemacht werden müssen.
Eine schnelle Lösung, die ich in Flash für Pixelpräzisionskarten verwendet habe, ist, eine zweite versteckte Overlay-Bitmap zu erstellen, die Sie für die Suche verwenden, wenn jemand auf das sichtbare Bild klickt.
Die gleiche Technik wird in alten Adventures verwendet. Jedes "Gebiet/Objekt/Link" hat seine eigene Pixelfarbe. Und dann behalten Sie einfach die Liste der Objekte mit der passenden Farbe.
Sobald Sie die pixelcolor unter dem MouseCoord haben, dann können Sie eine sehr schnelle Suche in der Tabelle tun .. und Bingo ...
Zuerst deaktivieren Sie das „auf das Bild klicken“ mit Nullen (schwarz) und das ist gleich "no link", dann zeichnen Sie jeden Bereich mit einer speziellen Farbe und speichern diese Farbe in der Liste.
Fragen Sie, ob Sie weitere Hilfe benötigen. Ich hoffe, das war eine nützliche Antwort.
Werfen Sie einen Blick auf Cake. Es ist ein Szenengrafik-Plug-In für Canvas. Könnte ein wenig zu kompliziert für das, was Sie suchen, sein, aber Sie können Ereignisse zu Cake eingewickelten Canvas-Objekten hinzufügen.
Das ist eine gute Idee. –