Технологии будущего

6.6.4. Примеры использования Canvas, SVG и VML

Примеров использования Canvas довольно много, и они частично охватывают уже известные области 2D-графики.

2D-проекции 3D-объектов

С помощью Canvas можно изображать 2D-проекции трехмерных объектов. В силу того, что все преобразования выполняются на пиксельном уровне, достаточно просто создать необходимые интерфейсы для изометрических проекций трехмерных объектов. Видимо, уже скоро на основе Canvas появятся полноценные 3D-экскурсии в браузерах или онлайн-игры "от первого лица".

Рис. 6.5. Изображение чайника при помощи Canvas, источник: www.nihilogic.dk

Typeface.js

В качестве следующего применения стоит упомянуть библиотеку typeface.js (http://typeface.neocracy.org/) и созданный на ее основе метод отображения произвольных шрифтов на сайте (ранее для этой цели активно использовался Flash). Единственным минусом данного подхода (на фоне повышенного быстродействия в связи с естественной поддержкой Canvas и простоты использования) является большой размер файла самих шрифтов.

Для применения библиотеки typeface.js необходимо перевести требуемый шрифт в некоторый объект, описываемый с помощью соответствующих конструкций на JavaScript, затем этот объект будет использоваться для представления произвольного текста на сайте (если быть точным, то в качестве объекта выступают отдельные символы шрифта). Размер файла шрифта в текстовом формате сильно варьируется от количества включенных в него символов и может составлять от 50 до 500 Кб (в неархивированном виде).

Для больших порталов (где размер страницы составляет 500-1000 Кб) данный подход вполне приемлем (если "стилизованных" заголовков будет не так много, чтобы лишний раз не нагружать браузер преобразованиями страницы). Для небольших сайтов загрузка нескольких десятков Кб JavaScript-кода для стилизации 10 Кб HTML- и CSS-кода выглядит не очень уместной.

Рис. 6.6. Применение Canvas для стилизации шрифтов, источник typeface.neocracy.org

Cufo’n

Cufo’n в качестве основы использует для отображения произвольных шрифтов уже SVG. Однако проблемы с конвертацией файлов шрифтов в промежуточный формат присутствуют и здесь.

Более подробно ознакомиться и загрузить необходимые файлы можно по адресу http://cufon.shoqolate.com/generate/.

Prosessing.js

Processing — язык программирования, созданный Casey Reas и Benjamin Fry в академических целях и направленный на кроссплатформенную обработку двумерных графических объектов. Он может быть реализован на любой аппаратной платформе путем преобразования исходных конструкций в платформозависимые инструкции.

Хорошим примером использования Canvas является реализация Processing для JavaScript (автор реализации — Джон Ресиг) — библио- тека Processing.js (processingjs.org/). Она предполагает полную совместимость инструкций данного языка с преобразованиями объекта Canvas. На данный момент доступно несколько проектов, применяющих Processing.js, в частности, несколько игр в браузерах, например, "Защи- та башнями".

Рис. 6.7. Использование processing.js для игры "Защита башнями", источник: willarson.com

Raphaеl

Если предыдущий пример был посвящен использованию Canvas больше в развлекательных целях, то библиотека Raphael.js (http://raphaeljs.com/) преследует сугубо практические цели (хотя и делает это с помощью SVG + VML). С ее помощью можно удобно и красиво представлять различные объемы данных во всем привычном формате графиков.

Применение этой библиотеки предельно просто: обычно нужно объявить необходимые данные и задать один из множества доступных представлений (или создать свое собственное). Более подробно с данной библиотекой можно ознакомиться на ее официальном сайте —http://raphaeljs.com/.

6.6.5. Проблемы быстродействияя

На данный момент Canvas при решении большинства задач справляется быстрее, чем SVG. Достаточно давно был разработан пример использования Canvas для ряда задач GoogLe Maps (http://www.ernestdeLgado.com/gmaps/canvas/ddemo1.htmL). В нем зафиксирован прирост скорости в 200500% (для всех браузеров, которые поддерживают Canvas).

Рис. 6.8. Пример использования Raphael.js для отображения данных, источник: raphaeljs.com

Рис. 6.9. Быстродействие Canvas, источник: www.ernestdelgado.com

Рис. 6.10. Возможности и быстродействие Canvas, источник: prototype-graphic.xilinus.com

Рис. 6.11. Сравнение быстродействия Canvas и SVG, источник: intertwingly.net

В результате другого тестирования (http://prototype-graphic.xilinus.com/samples/shape.html ) Canvas также демонстрирует значительное преимущество перед SVG, но менее широкий набор возможностей.

В качестве примера можно привести еще один тест (http://intertwingly.net/ stories/2006/07/10/penroseTiling.html) скорости отображения объектов в Canvas и SVG. Здесь SVG снова проигрывает (но совсем незначительно, в большинстве браузеров разницы почти нет).

Для уточнения вопросов производительности можно обратиться к исследованию (http://www.borismus.com/canvas-vs-svg-performance/), установившему закономерность между производительностью SVG, Canvas и параметрами изображения. В результате оказывается вполне очевидным, что при увеличении числа объектов (для SVG — векторных) производительность SVG падает сильно (почти экспоненциально), а Canvas остается на стабильном уровне. Здесь стоит отметить, что размер активной области при этом не изменяется.

Рис. 6.12. Производительность Canvas и SVG при увеличении числа объектов, источник: www.borismus.com

Однако если мы начнем увеличивать область построения (размеры объектов), то тут векторный формат показывает себя во всей красе: производительность практически не меняется. Производительность Canvas падает (как и следовало ожидать) квадратичным образом от числа объектов (площадь активной области увеличивается квадратично).

Рис. 6.13. Производительность Canvas и SVG при увеличении размера объектов, источник: www.borismus.com

Из этого можно сделать простой вывод: если вы собираетесь использовать точечную (пиксельную) графику, то лучше Canvas для этой цели ничего не подходит. При работе с большими (по площади) векторными объектами лучше применять SVG. Также будет необходимо дублировать всю функциональность через VML для IE 8 и ниже.