Библиотеки для работы с Сanvas

Теперь с имеющимся арсенальном средств мы вроде бы можем нарисовать буквально все! Даже трудно представить, что нам теперь недоступно. Вот только… сложно это все. Сложность — и в необходимости освоения матричных преобразований, прочей математики, без которой в компьютерной графике вообще трудно, но главная сложность состоит в надобности писать огромное количество кода на каждый штрих будущего шедевра веб-графики. Ну а если мы вовсе и не собирались создавать нетленку, а просто красивые и качественные элементы графического интерфейса нашего давно ожидаемого человечеством веб-сервиса или, на худой конец, платежной системы, нам и подавно не захочется терять много времени на все эти премудрости. На счастье, всегда находятся люди, готовые безвозмездно или не очень облегчить нам жизнь, и я рад представить плоды их работы.

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!).

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *