L'elemento Canvas ha l'equivalente di img's map, quindi è possibile definire aree selezionabili sull'elemento canvas?La tela (HTML5) ha l'equivalente di una mappa immagine?
C'è una breve menzione di una mappa a metà pagina qui: http://www.w3.org/TR/html5/the-canvas-element.html, ma non riesco a trovare nient'altro a riguardo.
Le mappe su tela sono attualmente un problema aperto con HTML5. Numero 105 per essere precisi. Vedi http://www.w3.org/html/wg/tracker/issues/105
Anche se non è possibile, una mappa di immagine su un'immagine trasparente posizionata su una tela non consente di ottenere ciò che è necessario?
Hai considerato l'utilizzo di svg anziché di tela? Con svg il grafico stesso può contenere tutte le informazioni necessarie per identificare le regioni attive ed è possibile associare i gestori di eventi proprio come faresti con gli elementi html.
Alcuni esempi di come è possibile rilevare MouseEvents su diverse parti della geometria delle forme SVG:
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
Come soluzione al vostro problema: Vorrei collegare un evento click per la tela e nell'evento del mouse esaminerei le corde del mouse, quindi una semplice lista di aree combinate con poligoni su cui si potrebbe fare una sorta di test di collisione. I rettangoli sarebbero un inizio, ma se hai davvero bisogno di aree speciali, dovrebbe essere fatto un test di collisione più avanzato.
Una soluzione rapida che ho utilizzato in Flash per le mappe di precisione dei pixel, consiste nel creare una seconda bitmap di sovrapposizione nascosta, che si utilizza per la ricerca quando qualcuno fa clic sull'immagine visibile.
La stessa tecnica utilizzata nei vecchi giochi di avventura. Ogni "area/oggetto/collegamento" ha il proprio colore di pixel. E poi mantieni l'elenco degli oggetti con il colore corrispondente.
volta che hai la pixelcolor sotto il mousecoord, allora si può fare una molto veloce ricerca nella tabella .. e bingo ...
In primo luogo è eliminare il "Clicca sull'immagine" con lo zero di (nero) e questo è uguale a "nessun collegamento", quindi si disegna ogni area con un colore speciale e si memorizza questo colore nell'elenco.
Chiedi se hai bisogno di ulteriore aiuto. Spero che questa sia stata una risposta utile.
Dai uno sguardo allo Cake. È un plug-in grafico di scena per canvas. Potrebbe essere un po 'troppo complicato per quello che stai cercando, ma puoi aggiungere eventi agli oggetti di canvas avvolti nella torta.
Questa è una buona idea. –