Как вычислить что курсор «внутри» не прямоугольной фигуры?

Question

[Антон Шаманов]

Допустим на холсте нарисованы прямоугольник, круг и звезда. Как определить что курсор наведен, например, на звезду?
Поясню зачем это нужно: HTML5 canvas не позволяет работать с изображением "послойно", поэтому нет возможности сделать какой-то элемент изображения кликабельным, элемент придется вычислять относительно положения курсора на canvas.
Или же лучше не париться и использовать SVG?
Насколько canvas универсальнее svg? Что может canvas и не может svg?

Answer 1

[Евгений Петров]

Canvas — растр
Потребляет ресурсы видеопроцессора, что делает его работу очень быстрой. Вследствие того, что он растр — умеет применять фильтры, делать захват кадра видео и т.д. и .т.п. С помощью Canvas доступна библиотека WebGL, что само по себе мощное средство для визуализации.

SVG — вектор
Можно использовать непосредственно в DOM, вставляя элементы на страницу. В результате такие элементы доступны для оформления с помощью CSS и являются полноценными участниками DOM. Это значит, что для них доступны как события (типа mouseenter, mouseleave, click и пр.), так и состояния (:hover и пр.).

В то же время, SVG может быть использован в качестве фона (data:uri), маски в фильтре CSS. В этом качестве он уже не доступен для управления с помощью CSS и Javascript.

То бишь это вообще разные технологии и работают с ними по-разному. Если нужны фигуры с обработкой событий и состояний, то однозначно нужен SVG. Если что-то мощное, динамичное, похожее на изображения — Canvas.

Comments

[Антон Шаманов]

Т.е. реализовать игру (например шашки) лучше все-таки на SVG?

[Евгений Петров]

Моё мнение — да. Я не вижу, где в этой задаче вам потребуется Canvas.
Хотя написал и подумал — можно захотеть анимацию какую-то (хотя где там в шашках анимация и зачем?)... Тогда и Canvas пригодится, но в качестве дополнения.

[Антон Шаманов]

Шашки это так.. для того чтобы обрисовать общий круг задач) На самом деле планирую онлайн версию игры Шакал www.mosigra.ru/Face/Show/jackal_inexpensive - я когда-то давно писал версию для игры по локалке на pascal'e, а теперь вот решил попробовать в большой веб перетащить))

[Евгений Петров]

Ну если нацеливаться на игры, то лучше сразу разбираться с Canvas. А для меню и интерфейсов различных использовать HTML и SVG.

[Антон Шаманов]

@Petroveg Кстати а можно ли использовать canvas совместно с map? это как раз бы решило проблему с кликабельными областями)

[Антон Шаманов]

При написании игр использующих в качестве управления мышь как раз и возникают проблемы ввиду недостатка интерактивности (проблема описанная в вопросе), а вот с портированием какого-нибудь Марио вообще никаких проблем)

[Евгений Петров]

Не могу похвастаться знанием работы с Canvas. Но примеры показывают, что нет ничего нерешаемого
www.html5canvastutorials.com/labs/html5-canvas-wor...
www.html5canvastutorials.com/labs/html5-canvas-int...

[Антон Шаманов]

@Petroveg kineticjs как раз то, что доктор прописал)) спс!

[Евгений Петров]

Есть и tree.js carvisualizer.plus360degrees.com/threejs

[Евгений Петров]

Там в комментариях вверху страницы все ссылке есть.

[Антон Шаманов]

@Petroveg я его уже видел, но он больше под 3d webgl заточен. Кстати этот кинетик как раз использует прием о котором я хотел спросить: насколько кошерно создавать под каждый слой отдельный canvas?

[Евгений Петров]

Как я уже сказал — не ас в Canvas. С позиции других технологий не вижу здесь ничего страшного. Это как несколько картинок по слоям. Только их грузить не нужно:)

[Антон Шаманов]

В итоге придумал даже более изящное решение: выводим прозрачное изображение (старая добрая 1пиксельная гифка) поверх канвы и задаем области с помощь map > area

[Евгений Петров]

Ну я бы не назвал это изящным))
А чего SVG оказался не востребованным? Это же круче и правильнее.

[Антон Шаманов]

@Petroveg придумал != использовал, ну оно изящнее чем аналог в kineticjs

[Евгений Петров]

Круто:) Пойду и отпраздную сей факт:) Ну или просто напьюсь:) Мне кажется — очень даже позитивно:)

[Евгений Петров]

А если серьёзно, то вроде в первом решении использованы SVG Path.