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
    <div id="container"></div>
    
     
  • Initialize height and width of container while creating stage object.
    
    stage = new Kinetic.Stage({
    
    container: 'container',
    
    width: 578,
    
    height: 200
    
    });
    
  • Create Kinetic layer.
    
    layer = new Kinetic.Layer();
    
  • Specify interval to call circle draw method
    adobe creative suite upgrade
    
    interval = setInterval(drawCircle, 1000);
    
  • 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
    
    wedge = new Kinetic.Wedge({
    
    x: 100,
    
    y: 100,
    
    radius: 70,
    
    angleDeg: degree,
    
    fill: 'red',
    
    rotationDeg: -90
    
    });
    
  • Add created wedge to layer

    layer.add(wedge);
    
  • Add a layer to stage

    stage.add(layer);
    
765qwerty765