With KineticJS you can draw shapes on the stage and manipulate them using the following elements:
Of course, you can implement all the necessary HTML5 Canvas functionality without KineticJS, but you have to spend a lot more time, and not necessarily get the same level of performance. The creators of KineticJS put all their love and faith into a brighter future of HTML5 interactivity. The main advantage of the library is high performance, which is achieved by creating two canvas renderers – a scene renderer and a hit graph renderer. One renderer is what you see, and the second is a special hidden canvas that’s used for high-performance event detection. A huge advantage of KineticJS is that it is an extension to HTML5 Canvas, and thus is perfectly suited for developing applications for mobile platforms. It is a known fact that the iOS platform does not support Adobe Flash. In this case, KineticJS is a good Flash alternative for iOS devices.
In short, the following are the main advantages of KineticJS:
- Familiarity with API (for developers with the knowledge of HTML, CSS, JS, and jQuery)
All is well for now :D. But how to start with?? No worries..browse to kineticjs and click download on homescreen, where it will redirect to a page having js code..copy it and paste it in a notepad file and save as kinetic.js.
Now just use the script like all other external scripts..,
Example: Lets consider to draw a rectangle using kinetic js…
2. create a container with div tag
3. declare stage and specify your container name,width and height. I knew, like me you have striked with one doubt..what is stage and why it is used? right? Ans is here…A stage is a place where you can create layers( Layers are tied to their own canvas element and are used to contain groups or shapes ) and draw your shapes. In my understanding, i consider it as a paper on pad.
4. Next layer is declared. If at all required you can add up attributes/properties you need.
5. Now create a rectangle with your own dimensions.
6. Finally add this rectangle to layer and layer to stage which is resided in a div tag.
7. Run the code