jCanvaScript: JavaScript library for working with html5 canvas

imageGood day to all!
jCanvaScript is, as you can see from the “picture to attract attention”, JavaScript framework. It is not difficult, I think, to guess from the name of the topic that the purpose of the library is to work with the HTML5 canvas element. Under the cut, a short story about the library and how it was created is waiting for everyone who is interested.

I read somewhere somewhere on the network, maybe even here on Habr, once again about canvas - and sat down to draw. It turned out to be simple, but not very convenient. Well, okay - there was a first thought, these are trifles, I'll try to create something animated. Creating animation was also easy - provided, of course, that the animation itself is simple and does not need to be controlled. In general, the farther into the forest - the more firewood. It was necessary to change something.
First, wrappers for drawing primitives appeared, then a prototype of the library was formed (with a factory of objects inside), functions were gradually added to it - for starters, just access to the capabilities of the canvas API. Then I wanted to work with events ... Time passed, the library grew.

So what do we have today?

A small, about 36kb (version 1.0 size) compressed file that provides a convenient interface for interacting with canvas. I will not describe the interfaces in the framework of this article, since enough has been said about them, moreover, with a bunch of examples, on the official websiteproject. But I’ll mention that the library is self-sufficient, that is, it does not require the connection of any additional libraries and is not an extension of any of them - yes, this is not surprising, it should probably be, but nonetheless. Somehow lately, writing plugins has become more popular.
I’ll also mention that:
  • Of course, mouse, keyboard, and focus events can be attached to objects.

    For instance:

    jc.circle(x,y,radius)
    	.click(function(){
    	//какой-нибудь код	
    	});
    

  • Of course, drag'n'drop is already implemented. I will not give the code, I will only say that the draggable and droppable functions are used, approximately as in jQuery.

  • Naturally, (JavaScript, after all) you can use method chains.

    Like this:

    jc.circle(x,y,radius)
    	.up('top')// тут мы кружок на передний план перемещаем
    	.id('myCircle')//тут присваеваем id
    	.name('myCircles'); //а тут присваеваем ему имя
    


  • Yes, elements can be assigned identifiers (id) and names (name) so that they can then be addressed individually (in the first case) or as a group (in the second case).

    For example, you can access the circle from the last example like this:

    jc('#myCircle').color('rgba(255,255,0,0.5)');//выбираем элемент по id и устанавливаем ему цвет
    jc('.myCircles').color('rgba(255,255,0,0.5)');//выбираем группу элементов по name и устанавливаем им цвет
    

The library is constantly being added, refactored and so on. This means that there is still something to change in the code, on the one hand, and that a lot more will be added, on the other. Wishes and ideas are welcome - write to support@jcscript.com. Bug reports - there too, I look forward to them with even greater impatience.

Yes, finally a little more code - also very simple. How do we draw a red circle on the canvas and make it move to some point in a while, gradually changing color to green? And like this:

jc.circle(x,y,radius,'#ff0000',1)
	.animate({x:x1,y:y1,color:'#00ff00'},time);


Of course, all this will work only if you have jCanvaScript, and in Internet Explorer you will need exCanvas in addition.

PS Honestly, I was going to wait a bit longer with the announcement - the site was not fully tested for literacy, but at the last conference # html5camp several times the question was raised about the framework for working with canvas, which made me hurry. There, by the way, there were twitter posts about jCanvaScript, but no response was received. And I want some feedback.)

UPD : GitHub , twitter

Also popular now: