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

Всем доброго!
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);