Toll Free - 855-572-2777 / 855-572-APPS

Our Thinking

HTML5 Canvas Widget Tutorial using KineticJS

By Rahul Tamhane | In User Interface Design | on April 4, 2013

HTML5 is rich in functionality. Many of them involved with canvas element. KineticJS library makes it easy to work with HTML5 canvas element to create custom drawn widgets. Here I am presenting a simple example to draw a circle with animation.

Draw a circle with animation

1. Add a container


<div id="container"></div>

2. Initialize height and width of container while creating stage object.


stage = new Kinetic.Stage({

container: &#039;container&#039;,

width: 578,

height: 200

});

3. Create Kinetic layer.


layer = new Kinetic.Layer();

4. Specify interval to call circle draw method
adobe creative suite upgrade


interval = setInterval(drawCircle, 1000);

5. In drawCircle method, increase degree between 2 lines upto 360 in each call.

6. Create wedge object and initialize following parameters:

a. x and y coordinate: center of circle

b. angleDeg: degree between two radius

c. radius: length of radius

d. rotationDeg: starting point for circle


wedge = new Kinetic.Wedge({

x: 100,

y: 100,

radius: 70,

angleDeg: degree,

fill: &#039;red&#039;,

rotationDeg: -90

});

7. Add created wedge to layer

layer.add(wedge);

8. Add a layer to stage

stage.add(layer);
765qwerty765

2 Comments to "HTML5 Canvas Widget Tutorial using KineticJS"

    *
  • Sundar says:

    September 26, 2013 at 12:35 PM -

    This is an excellent tutorial. Thanks again for the great tutorial.

  • Web developer says:

    April 12, 2013 at 10:28 AM -

    In HTML5 this elements are very useful for great design. Thank you gor sharing.

Copyright by Mobisoft Infotech LLC 2013, All rights reserved
GET IN TOUCH