Примеры использования Canvas, SVG и VML. Технологии будущего. Оптимизация структуры веб-страниц
Появление Canvas
Основные возможности
Примеры использования 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
Cufуn
Cufуn в качестве основы использует для отображения произвольных шрифтов уже SVG. Однако проблемы с конвертацией файлов шрифтов в промежуточный формат присутствуют и здесь.
Более подробно ознакомиться и загрузить необходимые файлы можно по адресу: http://cufon.shoqolate.com/generate/ .
Prosessing.js
Processing язык программирования, созданный Casey Reas и Benjamin Fry в академических целях и направленный на кроссплатформенную обработку двумерных графических объектов. Он может быть реализован на любой аппаратной платформе путем преобразования исходных конструкций в платформо-зависимые инструкции.
Хорошим примером использования Canvas является реализация Processing для JavaScript (автор реализации John Resig, он же автор jQuery) библиотека Processing.js
(http://processingjs.org/ ). Она предполагает полную совместимость инструкций данного языка с преобразованиями объекта Canvas. На данный момент доступно несколько проектов, использующих Processing.js, в частности, несколько игр в браузерах, например, Защита башен .
Рис. 6.7. Использование processing.js для игры Защита башнями , источник willarson.com
Raphael
Если предыдущий пример был посвящен использованию Canvas больше в развлекательных целях, то библиотека Raphael.js (http://raphaeljs.com/) преследует сугубо практические цели (хотя и делает это с помощью SVG + VML). С ее помощью можно удобно и красиво представлять различные объемы данных во всем привычном формате графиков.
Использование этой библиотеки предельно просто: обычно нужно объявить необходимые данные и задать один из множества доступных представлений (или создать свое собственное). Более подробно можно ознакомиться на сайте самой библиотеки http://raphaeljs.com/ .
Рис. 6.8. Пример использования Raphael.js для отображения данных, источник raphaeljs.com