Comments 11
А почему canvas не подходит для векторной графики? Да, придется от чуть меньше до чуть больше написать ручками, фактически придется найти движок, но на канвасе можно рисовать как угодно, в том числе и векторной графикой. http://processingjs.org/ или http://paperjs.org/ например. Как преимущество — можно смешивать векторную и растровую графику одновременно.
Доступ из JavaScript
Это почему вдруг к svg нет доступа из JS?
Скорее всего имелся ввиду результат. У канваса он всегда растрируется при рендере, что можно запросто увидеть включив зум/масштабирование.
SVG тоже всегда растрируется (растеризуется?) при рендере. Просто браузер берет на себя обработку зума.
Канвас гораздо более низкоуровневый. Собственно, от сюда и все различия. Нужно сделать что-то быстро и на коленках — svg хорош (но не идеален), но если хочется гибкости и возможности рисовать что вздумается либо быть хоть немного уверенным, что это будет работать быстро (svg с css анимациями может быть очень тормозным, если рисовать чуть больше, чем 5 линий) — брать канвас. Но да, придется ручками делать то, что с свг уже дано.
— Если элементов очень много, то лучше canvas. Тысячи HTML SVG элементов в DOM это жуткие лаги.
— Если слишком богатая анимация, то canvas
— Если элементов не много, то лучше svg. Так как это html элементы, можно накладывать стили, обрабатывать клики и так далее. С canvas же надо повозиться
Делал как раз только что карту метро, чтобы можно было на ней в бэкэнде расставить точки ("на каких станциях магазины"), а во фронтэнде на них по клику и подгружать окно со схемой проезда и прочие подробности. Карта должна масштабироваться под размер окна и зумиться по клику.
Сделал всё в Adobe Animate на canvas, промучился там, но сделал.
Получил на выходе 190К библиотек CreateJS + 18К сами файлы + 214К графика, итого 422К! И всё это дико тормозит на загрузке. И CreateJS выдаёт всякие дебильные ошибки вроде "Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images." Отдельные точки в DOM не видно.
Плюнул на всё потраченное время, переделал на чистом JS в GWD. 158К графика + 13К все файлы = 171К, втрое меньше. Работает мгновенно, отлаживать удобно. Каждая точка — нормальный HTML-объект и так далее.
В общем, чтоб я ещё раз полез в этот глючный Animate и работу с canvas… только если работа с тяжелой графикой типа игры, где время загрузки неважно и где это не компонент сайта, которому нужно взаимодействовать с другими. А жаль, лет 10 назад я бы с удовольствием писал всё это на Flash и об альтернативах и не думал!
Canvas/WebGL — это для классических игровых проектов
Интересно какая у них разница в потреблении памяти
у меня жрёт памяти примерно одинаково, но при работе с Canvas используется CreateJS, который почему-то очень активно использует процессор — даже когда ничего не происходит, подъедает его скачками от 5 до 20 (!) процентов. Это на десктопе-то..
SVG или canvas?