Теперь с имеющимся арсенальном средств мы вроде бы можем нарисовать буквально все! Даже трудно представить, что нам теперь недоступно. Вот только… сложно это все. Сложность — и в необходимости освоения матричных преобразований, прочей математики, без которой в компьютерной графике вообще трудно, но главная сложность состоит в надобности писать огромное количество кода на каждый штрих будущего шедевра веб-графики. Ну а если мы вовсе и не собирались создавать нетленку, а просто красивые и качественные элементы графического интерфейса нашего давно ожидаемого человечеством веб-сервиса или, на худой конец, платежной системы, нам и подавно не захочется терять много времени на все эти премудрости. На счастье, всегда находятся люди, готовые безвозмездно или не очень облегчить нам жизнь, и я рад представить плоды их работы.
LibCanvas — фреймворк для работы с Canvas и сопутствующими технологиями, применяемый для разработки игр и других интерактивных приложений. LibCanvas построен на базе AtomJS — легкого JavaScript фреймворка, похожего на MooTools и jQuery.
Фреймворк работает с Canvas посредством некой универсальной оболочки, в которой уже имеются встроенные объекты, такие как ImagePreloader, ProgressBar и fps-измеритель. Пример работы библиотеки от ее автора, украинского разработчика Павла Пономаренко (theShock):
New iibCanvas. Canvas2D($(‘canvas’))
.setFps(50) // количество фпс, которое браузер постарается рендерить. fpsMeter(20) // включаем измеритель фпс. Он будет брать последних N кадров, получать среднее значение и выводить количество fps. setConfig({
Background : ‘#EFEBE7’, // этим фоном заливается весь холст
Images : App. imagesList,
пока эти картинки не загрузятся — Canvas работу не начнет progressBar : App. progressBarStyle
но чтобы пользователь не впал в ступор — покажем прогресс-бар
})
.addElement(new App. MyFirstElement()) Добавляем пару элементов в Canvas. add Element(new App. SecondElement())
каждый кадр будет вызывать их метод. draw()
. start ():
сюда можно также передать ф-цию, в которой сделать дополнительные действия
Самое интересное в LibCanvas — возможность назначать обработчики событий внутри элемента Canvas почти так же просто, как и в DOM-дереве html-документа. Фреймворк позволяет работать с событиями очень прозрачно и масштабируемо. Достаточно подписаться на рассылку сообщений о событиях:
This. canvas. mouse. subscribe(this);
Теперь при каждом событии будет вызываться метод event c именем события. Processing. js — это результат портирования на JavaScript/canvas языка Processing visualization language, разработанного в MIT инструмента визуализации. Это, наверное, самая проработанная библиотека для работы с Canvas, с синтаксисом, напоминающим родную для Processing Java. Processing. js предлагает два подхода к описанию визуализации: промежуточный код, в дальнейшем разбираемый самой библиотекой (отдельным файлом или внутри страницы), и явный код на JavaScript.
Вот так выглядит Hellow Word на Processing. js (JavaScript-вариант):
(function(processing, $constants) { function setup() {
Processing. size(200, 200); processing. background(100); processing. stroke(255); processing. ellipse(50, 50, 25, 25); processing. println("hello web!");
}
Processing. setup = setup;
})
JCanvaScript — это небольшой (около 36 avaScript-framework, предоставляющий удобный интерфейс для взаимодействия с canvas. При всей простоте c ним довольно удобно работать, особенно привлекают JavaScrippt цепочки методов:
Jc. circle(x, y,radius) создаем кружок
.up(‘top’) перемещаем кружок на передний план. id(‘myCircle’) присваиваем id. name(‘myCircles’); присваиваем имя
Paper. js — еще одна JavaScript-библиотека для работы с Canvas общего назначения. Она основана на Scriptographer, языке сценариев для Adobe Illustrator. Это полноценный фреймворк, который работает с canvas-формами как с объектами векторной графики: возможна работа как с вложенными слоями и группами, так и с отдельными или составными путями, расторами и символами.
Еще хочется упомянуть cakejs. Это небольшая библиотека для canvas-анимации, на которой создано несколько популярных брау-зерных игр (например, Off!).
Добавить комментарий