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

  • Add a container 
    [code language="html"]
<div id="container"></div>
[/code]
     
  • Initialize height and width of container while creating stage object. 
    [code language="javascript"]

stage = new Kinetic.Stage({

container: 'container',

width: 578,

height: 200

});
[/code]
  • Create Kinetic layer. 
    [code language="javascript"]

layer = new Kinetic.Layer();
[/code]
  • Specify interval to call circle draw method 
    adobe creative suite upgrade
    [code language="javascript"]

interval = setInterval(drawCircle, 1000);
[/code]
  • In drawCircle method, increase degree between 2 lines upto 360 in each call.
  • Create wedge object and initialize following parameters:
    • x and y coordinate: center of circle
    • angleDeg: degree between two radius
    • radius: length of radius
    • rotationDeg: starting point for circle 
    [code language="javascript"]

wedge = new Kinetic.Wedge({

x: 100,

y: 100,

radius: 70,

angleDeg: degree,

fill: 'red',

rotationDeg: -90

});
[/code]
  • Add created wedge to layer

    [code language="javascript"]
layer.add(wedge);
[/code]
  • Add a layer to stage

    [code language="javascript"]
stage.add(layer);
[/code]
765qwerty765