Аналог тега map для HTML5 canvas

#canvas #html5

Есть ли возможность средствами только канваса задавать активную области область на
изображении подобно HTML-тегу 

Ответы

Ответ 1

Для тех, кто набрел на вопрос через поиск, - возможные решения.


Создать на скрытом канвасе проекцию требуемого объекта, “выкрасить” её в определённый
цвет. Затем берём координаты на видимом канвасе и смотрим данные о цвете точки с этими
координаты на скрытом (getImageData) и если полученное - цвет нужной проекции, то мы
навели мышку на объект. Подмогой для создания проекции может послужить глобальное свойство
globalCompositeOperation. В цвете проекции можно задавать код объекта, что удобно при
проецирование нескольких объектов.


Так же нахождение точки на фигуре можно рассчитать математически. Подборка ссылок: 

Collision Detection and Response (перевод Урок: базовые алгоритмы определения столкновений)
О прямоугольных координатах и гексагональных сетках
Polygon triangulation: decomposition of a polygon into triangles with AS3
Algorithm to determine if a point is inside a triangle with mathematics (no hit test
involved)


Ответ 2

Средствами канваса не получится, но можно попробовать приобщить к этому делу js.
Результат можно посмотреть здесь.