JavaScript
20 February 2011

jCanvaScript: JavaScript библиотека для работы с html5 canvas

From Sandbox
imageВсем доброго!
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

+81
9.9k 168
Comments 78
Top of the day