Привет, Хабр! Я хочу рассказать тебе о новой библиотеке, которая помогает очень легко и изящно рисовать всякие штучки-дрючки на html5 canvas. Возможно, ты уже слышал о ней, но сейчас она пережила новое рождение. Что-ж, под катом я покажу тебе много интересненьких примеры, расскажу про нюансы работы и дам ссылку на грозу всех секретарш — почти работающий пасьянс «Косынка», созданную с помощью этой LibCanvas.



Итак, это библиотека действительно пережила второе рождение. Или, может, повзрослела? Чтобы не томить, я сразу перейду к делу, то есть к примерам.

Поведения

Кроме того, о чем я рассказывал в первой части появилась очень существенная фича — поведения. Они позволяют придать какую-то определенную функциональность вашему объекту. Я приведу примеры некоторых из них. На самом деле их немного больше и один может быть завязан на другом

LibCanvas.Interfaces.Draggable и LibCanvas.Interfaces.Droppable

Эти интерфейсы многие знают по jQuery. Draggable позволяет двигать объекты. Droppable позволяет бросать один объект во второй. В примерах draggable просто двигаем объекты. В примерах droppable бросаем прямоугольник в круг и мимо круга:
Пример draggable
Пример droppable

LibCanvas.Behaviors.Linkable

Привязываем какой-то объект к текущему так, чтобы если мы движем текущим объектом — двигался и привязанный. В примере двигаем кругом — двигаются и квадраты, но не наоборот.
Пример linkable

LibCanvas.Behaviors.Moveable

Перемещаем объект в какую-то точку плавно с заданной скоростью или мгновенно
Пример moveable

и разные другие интерфейсы, как clickable, drawable (основа основ), bindable (еще одна основа основ), etc. Со временем буду наращивать. Например, в ближайших планах — resizable [если придумаю, как ресайзить LibCanvas.Shapes.Polygon(или просто кидать Exception?)]

Что-то более приближенное к жизни

Desktop Environment

Давайте на том функционале, что есть симитируем среду рабочего стола. Всего 34 строчки кода в App.Start.de() и eсть результат! Конечно, до KDE4 нашей среде еще расти и расти, но надо ведь с чего-то начинать? Как бы её назвать? CDE? Хотя занято, вроде. Ладно, потом придумаю.

Пасьянс «Косынка»

А вот и самое интересное. Очень даже играбельное приложение с вменяемым фпсом и кроссбраузерностью (я сказал кроссбраузерностью, про IE там ничего не было!)
Пасьянс «Косынка» во всей красе на html5+javascript+libcanvas. Наслаждайтесь.

Лицензия

LibCanvas — lgpl, исходники в репозитарии на гуглокоде или в архиве
Пасьянс «Косынка» — gpl v3 — в архиве

F.A.Q

1. Mootools — ацтой, испоганили весь libcanvas

Я очень люблю jQuery. Прям души не чаю в нем. Он прекрасен. Изумителен. Но…
Он совершенно не подходит для разработки на canvas. Что есть, что нету. jQuery == DOM
Сначала я делал свой миниатюрный фреймворк для этой библиотеки, но потом осознал, что я изобретаю MooTools. Я успел полюбить этот фреймворк за время работы с ним (а узнал я его после jQuery), и я вам скажу, что он не менее прекрасен! Конечно, для работы с DOM jQuery подходит значительно лучше, но для таких целей, как рисование в канвас без него было бы очень сложно. Каждый класс, каждый метод в LibCanvas просто пропитан мутулзом и без него это все не получилось бы так красиво и изящно

2. Расширение прототипов(особенно массивов) — зло!

Такие слова зло, а расширение прототипов(особенно массивов) — это гениальная идея. Использование for (var i in []) вызовет проблемы в ie даже не с раширенными прототипами, зато с другой стороны это позволяет сделать код очень удобочитаемым и изящным. А для массивов используйте ([]).each();

3. Ну и глючный ваш canvas!

Я считаю, что канвас(как и html5) сейчас переживает период становления. Год-два и он станет настолько же естественным в вебе, как и flash. Google, Opera, Mozilla, Apple — все улучшают канвас с невероятными темпами. Да даже Microsoft пообещали в будущем детище IE9 ввести поддержку этой технологии. Посмотрите, что было полтора года назад(Firefox 3.0, Opera 9.5, Chrome только появился) и что сейчас (Firefox 4, Opera 10.6, Chrome 6) в плане скорости рендеринга. Разница колосальная. Практически с нуля до приемлимого уровня. И еще через полтора года мы увидим потрясающий результат.

4. Ну и глючны вашы (LibCanvas|Примеры|Пасьянс)!

Возможно. Они тоже на этапе становления, бета версия. Принимаю все баги и предложения в багосборник на гуглокоде. Вы можете сделать это лучше.

5. SVG, RaphaelJS, etc

Будьте оригинальны — не вспоминайте это тут. Если интересна моя позиция — читайте комменты к предыдущему топику и, главное, комментарии в первой ветке этого поста.