Всем доброго!
jCanvaScript — это, как видно из «картинки для привлечения внимания», JavaScript-framework. Не трудно, я думаю, догадаться из названия топика, что предназначение библиотеки — работа с элементом HTML5 canvas. Под катом всех заинтересовавшихся ждет небольшой рассказ о библиотеке и о том, как она создавалась.
Прочитал я как-то где-то в сети, может даже и здесь, на Хабре, в очередной раз про canvas — и сел рисовать. Это оказалось просто, но не очень удобно. Ну и ладно — была первая мысль, это мелочи, попробую-ка я создать что-нибудь анимационное. Создавать анимацию тоже оказалось просто — при условии, конечно, что сама анимация проста и ей не надо управлять. В общем, чем дальше в лес — тем больше дров. Надо было что-то менять.
Сначала появились обертки для рисования примитивов, потом сформировался прототип библиотеки (с фабрикой объектов внутри), в него постепенно добавлялись функции — для начала просто доступ к возможностям canvas API. Затем захотелось работы с событиями… Время шло, библиотека росла.
Итак, что же мы имеем на сегодняшний день?
Небольшую, около 36kb (размер версии 1.0) в сжатом виде, библиотеку, предоставляющую удобный интерфейс для взаимодействия с canvas. Описывать интерфейсы я в рамках данной заметки не буду, поскольку о них достаточно сказано, к тому же с кучей примеров, на официальном сайте проекта. Зато упомяну о том, что библиотека самодостаточна, то есть не требует подключения никаких дополнительных библиотек и не является расширением какой-либо из них — да, это не удивительно, так и должно, пожалуй, быть, но тем не менее. Как-то последнее время популярнее плагины писать.
Еще упомяну про то, что:
Библиотека постоянно дописывается, рефакторится и прочее. Это означает, что там есть еще что менять в коде, с одной стороны — и то, что будет добавлено еще очень много всего, с другой. Пожелания и идеи приветствуются — пишите на support@jcscript.com. Баг-репорты — туда же, их жду с еще большим нетерпением.
Да, напоследок еще немного кода — тоже очень простого. Как нам нарисовать красный кружок на canvas и заставить его перемещаться до некоторой точки за некоторое время, постепенно меняя цвет на зеленый? А вот так:
Конечно же, все это заработает только при наличии jCanvaScript, а в Internet Explorer — понадобится вдобавок exCanvas.
P.S. Честно говоря, я собирался еще немного погодить с анонсом — сайт не до конца проверен на грамотность, но на прошедшей конференции #html5camp несколько раз поднимался вопрос о framework'е для работы с canvas, что заставило поторопиться. Там, кстати, проходили посты в twitter о jCanvaScript, но отклика получено не было. А откликов хочется.)
UPD: GitHub, twitter
jCanvaScript — это, как видно из «картинки для привлечения внимания», JavaScript-framework. Не трудно, я думаю, догадаться из названия топика, что предназначение библиотеки — работа с элементом HTML5 canvas. Под катом всех заинтересовавшихся ждет небольшой рассказ о библиотеке и о том, как она создавалась.
Прочитал я как-то где-то в сети, может даже и здесь, на Хабре, в очередной раз про canvas — и сел рисовать. Это оказалось просто, но не очень удобно. Ну и ладно — была первая мысль, это мелочи, попробую-ка я создать что-нибудь анимационное. Создавать анимацию тоже оказалось просто — при условии, конечно, что сама анимация проста и ей не надо управлять. В общем, чем дальше в лес — тем больше дров. Надо было что-то менять.
Сначала появились обертки для рисования примитивов, потом сформировался прототип библиотеки (с фабрикой объектов внутри), в него постепенно добавлялись функции — для начала просто доступ к возможностям canvas API. Затем захотелось работы с событиями… Время шло, библиотека росла.
Итак, что же мы имеем на сегодняшний день?
Небольшую, около 36kb (размер версии 1.0) в сжатом виде, библиотеку, предоставляющую удобный интерфейс для взаимодействия с canvas. Описывать интерфейсы я в рамках данной заметки не буду, поскольку о них достаточно сказано, к тому же с кучей примеров, на официальном сайте проекта. Зато упомяну о том, что библиотека самодостаточна, то есть не требует подключения никаких дополнительных библиотек и не является расширением какой-либо из них — да, это не удивительно, так и должно, пожалуй, быть, но тем не менее. Как-то последнее время популярнее плагины писать.
Еще упомяну про то, что:
- Конечно же, на объекты можно навешивать события мыши, клавиатуры и фокуса.
Например:
jc.circle(x,y,radius) .click(function(){ //какой-нибудь код });
- Конечно же, drag'n'drop уже реализован. Код не буду приводить, скажу лишь, что используются draggable и droppable функции, примерно как в jQuery.
- Естественно, (JavaScript, как-никак) вы можете использовать цепочки методов.
Вот так:
jc.circle(x,y,radius) .up('top')// тут мы кружок на передний план перемещаем .id('myCircle')//тут присваеваем id .name('myCircles'); //а тут присваеваем ему имя
- Да, элементам можно присваивать идентификаторы (id) и имена (name), чтобы затем к ним обращаться индивидуально (в первом случае) или как к группе (во втором случае).
Например, обратиться к кругу из последнего примера можно так:
jc('#myCircle').color('rgba(255,255,0,0.5)');//выбираем элемент по id и устанавливаем ему цвет jc('.myCircles').color('rgba(255,255,0,0.5)');//выбираем группу элементов по name и устанавливаем им цвет
Библиотека постоянно дописывается, рефакторится и прочее. Это означает, что там есть еще что менять в коде, с одной стороны — и то, что будет добавлено еще очень много всего, с другой. Пожелания и идеи приветствуются — пишите на support@jcscript.com. Баг-репорты — туда же, их жду с еще большим нетерпением.
Да, напоследок еще немного кода — тоже очень простого. Как нам нарисовать красный кружок на canvas и заставить его перемещаться до некоторой точки за некоторое время, постепенно меняя цвет на зеленый? А вот так:
jc.circle(x,y,radius,'#ff0000',1)
.animate({x:x1,y:y1,color:'#00ff00'},time);
Конечно же, все это заработает только при наличии jCanvaScript, а в Internet Explorer — понадобится вдобавок exCanvas.
P.S. Честно говоря, я собирался еще немного погодить с анонсом — сайт не до конца проверен на грамотность, но на прошедшей конференции #html5camp несколько раз поднимался вопрос о framework'е для работы с canvas, что заставило поторопиться. Там, кстати, проходили посты в twitter о jCanvaScript, но отклика получено не было. А откликов хочется.)
UPD: GitHub, twitter