Рисование на JavaScript с помощью Paper.js, Processing.js, Raphael.js
При создании дизайна сайта, очень удобно использовать рисунки и анимацию основанную на JavaScript фреймверках. Это быстро, удобно и красиво. Но…
Перед тем как начать рисовать что-то в своем браузере, задайте себе три вопроса:
- Нужна ли вам поддержка старых браузеров? Если ответ ДА, вашим выбором будет Raphael.js. Он поддерживается браузерами начиная с 7 и 3. Некоторые элементы графики будут работать даже в 6. Хотя эта библиотека не поддерживает технологий которые предоставляют следующие библиотеки…
- Нужна ли вам поддержка Android устройств? Android не поддерживает SVG графики, поэтому вам придется использовать Paper.js или Processing.js. Ходят слухи, что Android 4 поддерживает обработку SVG, но большинство устройств работают под старой версией Android.
- Нужна ли вам интерактивность? Raphael и Paper.js предрасположены на интерактивность через клики, перетягивания и касания. Processing.js не поддерживает никаких объектных событий, поэтому действия пользователя будет сложно отслеживать. Processing.js может рисовать отличную анимацию на главной странице, но для интерактивных приложений лучше использовать другие средства.
Paper.js, Processing.js и Raphael лидирующие библиотеки для рисования на веб страницах средствами javascript. Вы можете использовать технологию Flash, но эти три отлично работают с HTML5 и поддерживают наибольшее число браузеров.
Выбор правильного фреймверка определит успех вашего проекта. В этой статье мы будем обозревать преимущества и недостатки каждой библиотеки, только полезная информация, которая позволит сделать правильный выбор.
Код использованный в этой статье доступен на демо странице.
Обзор фреймверков для рисования
Они все основаны на JavaScript, но рисование происходит немного разными способами. Raphael написан на чистом javascript коде, но Paper.js использует PaperScript, и Processing.js использует собственный скрипт.
Они все поддерживают FireFox, Opera, Chrome и Safari, но Internet Explorer исключение – Paper.js и Processing.js используют тег canvas, который поддерживается в IE9 и выше.
PaperScript это расширение к javascript, которое позволяет писать скрипты, которые не взаимодействуют с именами функций и переменных javascript. Это исключает конфликты этой библиотеки с другими js кодами.
Processing.js основан на фреймверку Processing, который запускается на Java виртуальной машине. При написании код может нагадывать Java, но он более похож на JavaScript и не нуждается в сложном синтаксисе.
Рисование с помощью этих троих библиотек простое, если вы когда либо сталкивались с JavaScript.
Начнем
Начинаем с импорта библиотеки. Процесс настройки каждой из них будет немного отличаться.
Настройка Paper.js
Paper.js потребует тип скрипта text/paperscript и ID canvas тега, который вы будете использовать.
Настройка Processing.js
Processing.js использует data-processing-sources атрибут canvas тега, для загрузки вашего рисунка. Я использую расширение .java для исходного файла Processing библиотеки, в таком случае мой редактор правильно подсвечивает код. Некоторые автора используют .pde или .pjs расширение. Выбирать вам.
Настройка Raphael
Raphael подключается как и любой другой файл . Он отлично работает с функциями jQuery или другими JavaScript фреймверками.
