SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...

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

Допустим на холсте нарисованы прямоугольник, круг и звезда. Как определить что курсор наведен, например, на звезду?
Поясню зачем это нужно: HTML5 canvas не позволяет работать с изображением "послойно", поэтому нет возможности сделать какой-то элемент изображения кликабельным, элемент придется вычислять относительно положения курсора на canvas.
Или же лучше не париться и использовать SVG?
Насколько canvas универсальнее svg? Что может canvas и не может svg?
  • Вопрос задан
  • 2470 просмотров
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Canvas — растр
Потребляет ресурсы видеопроцессора, что делает его работу очень быстрой. Вследствие того, что он растр — умеет применять фильтры, делать захват кадра видео и т.д. и .т.п. С помощью Canvas доступна библиотека WebGL, что само по себе мощное средство для визуализации.

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

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

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

Войдите, чтобы написать ответ

Похожие вопросы