Содержание
Только недавно мы смогли рассмотреть JavaScript для графической работы, такой как рисование диаграмм или, возможно, даже игр HTML5. Улучшенные движки JavaScript и постоянно улучшающаяся поддержка браузеров (в частности, работа, выполняемая в движке Chrome V8) делают JavaScript жизнеспособным вариантом для большой работы с графикой. Сегодня я рассмотрю пять библиотек, призванных помочь вам в этой области, а также те, которые упрощают работу с элементом холста HTML5.
Если вы новичок в элементе холста, я настоятельно рекомендую вам ознакомиться с ним, прежде чем использовать библиотеку, чтобы упростить задачу. Знание того, как сделать что-то сложным, поможет вам писать лучший код, даже если вы используете библиотеку. Реми Шарп написал хорошее введение в HTML5 Doctor, которое должно помочь вам начать работу, и ссылки на другие ресурсы, когда вы проработаете введение.
D3.js
Первый - это D3.js, который описывает себя как «библиотеку JavaScript для управления документами на основе данных». Некоторые из примеров очень впечатляют; от карты США до подробных маркированных диаграмм. D3 разработан, чтобы вы могли применять к документу преобразования, управляемые данными. Он обычно используется для визуализации данных, и о нем написано множество руководств. D3 не является конкретно графической библиотекой, а просто предоставляет вам инструменты для создания графиков, среди прочего. В приведенном ниже примере показана гистограмма с накоплением.Неудивительно, что для упрощения создания графиков вокруг D3 возникли библиотеки, наиболее популярной из которых является NVD3, библиотека, которая зависит от D3 и упрощает создание сложных графиков. Я бы посоветовал вам сначала попробовать построить графики с помощью D3, прежде чем пробовать такую библиотеку, как NVD3. NVD3 великолепен, но построение графиков с чистым D3 дает большую степень настройки и, конечно же, больший контроль.
БонсайJS
Далее идет BonsaiJS, графическая библиотека JS, в которой есть впечатляющие демонстрации, такие как работающая игра Pong и интерактивная круговая диаграмма. Бонсай отличается от D3 тем, что он не работает путем взаимодействия с HTML, все это делается с помощью JavaScript. Еще одна замечательная вещь в бонсай - это онлайн-редактор, который позволяет вам легко поиграть с бонсай и сразу увидеть результаты. Хотя синтаксис D3 часто будет напоминать что-то более похожее на jQuery с точки зрения взаимодействия с элементами, с Bonsai вы создаете элементы с помощью JavaScript, а Bonsai автоматически добавляет их на страницу для вас. И бонсай, и D3 очень сильны, но подходят к делу немного по-разному.
Рафаэль
Raphael - небольшая библиотека, предназначенная для упрощения работы с векторной графикой в Интернете. Он также позволяет создавать сложные диаграммы и визуализации и работает путем рисования элементов SVG. Один из плюсов Рафаэля в том, что он лучше поддерживает браузеры, поддерживает IE6 и выше, тогда как Bonsai и D3 не поддерживают старые версии Internet Explorer. Однако один минус для Рафаэля заключается в том, что исходный код последний раз обновлялся 11 месяцев назад, поэтому он немного устарел. Рафаэль остается очень способной библиотекой и, безусловно, заслуживает внимания. Одна из моих любимых демонстраций - это карта метро Бена Барнетта, которая воссоздает знаменитую карту метро Лондона с Рафаэлем и действительно демонстрирует мощь библиотеки (снимок экрана ниже).
Three.js
Three.js сильно отличается от трех библиотек, которые я обсуждал до сих пор. Three.js используется для создания трехмерной графики, часто через WebGL. Он способен на невероятные вещи, например, этот спортивный автомобиль (на фото ниже), но поскольку он ресурсоемкий и использует WebGL, поддержка браузеров, очевидно, сейчас ограничена. Для эффективной работы с Three.js вам потребуется хорошее знание 3D-графики. Тем не менее, есть хорошие учебные пособия, в том числе хорошее введение в библиотеку. Three.js реализует шейдеры, камеры, анимацию и многое другое.
EaselJS
Если вам нужна библиотека, которая больше действует как оболочка для работы с элементом холста, EaselJS может вам подойти, особенно если вы хотите создавать игры. Он способен воссоздать классическую игру Asteroids или позволяет пользователям рисовать на холсте. Easel поставляется с исчерпывающей документацией по API. EaselJS черпал вдохновение для названий классов из Flash, поэтому, если вы знакомы с Flash, вам будет проще освоить Easel.
Что касается вводных руководств, то это видео на YouTube дает хорошее представление, а в вики-странице Easel есть ссылки на другие материалы. Easel не похож на D3 или Bonsai - он явно разработан с учетом большего взаимодействия - игр, интерфейсов перетаскивания и т. Д., А не визуализации данных. Также стоит проверить весь пакет CreateJS, к которому принадлежит Easel. Сюда входят TweenJS, библиотека для анимации (или анимации) свойств HTML5 и JavaScript, SoundJS для работы со звуком в JavaScript и PreloadJS, библиотека для управления предварительной загрузкой ресурсов. На скриншоте выше показана версия Asteroids для EaselJS.
Выбор правильного инструмента
Благодаря новой функциональности, доступной нам как разработчикам JavaScript, варианты использования JavaScript постоянно расширяются, и разработчики пользуются этим, создавая эти библиотеки, такие как пять упомянутых ранее, чтобы сделать это еще проще. Некоторые демонстрации этих библиотек, в частности ThreeJS, просто потрясают; Не так давно ничего из этого было невозможно.
Как и в случае с другими статьями из этой серии «Лучшие JavaScript», я рекомендую вам попробовать несколько библиотек, прежде чем выбирать одну из них для вашего приложения. В каждой библиотеке есть что-то, что она делает хорошо, и, возможно, пара слабых мест, и вы должны потратить время на то, чтобы выбрать правильную для работы.
