canvas - Kineticsjs drawing arc with Kinetic.Shape -

hi want build loading animation, doughnut chart becoming bigger , bigger. need custom shape, because need hole in middle other animations. far is:

var stage = new kinetic.stage({ container: 'loader', width: 600, height: 200 });

var layer = new kinetic.layer();

var circle = new kinetic.circle({ x: stage.getwidth() / 2+200, y: stage.getheight() / 2, radius: 70, fill: 'red' });

var x = stage.width / 2; var y = stage.height / 2; var radius = 75; var startangle = 1.1 * math.pi; var endangle = 1.9 * math.pi; var counterclockwise = false;

var arc = new kinetic.shape({

scenefunc: function(context) {     context.beginpath();     context.arc(x, y, radius, startangle, endangle, counterclockwise);     context.closepath();     // kineticjs specific context method     context.fillstrokeshape(this); }, fill: 'green', stroke: 'red', strokewidth: 4 }); 

// add shape layer

layer.add(arc);

// add layer stage stage.add(layer);

if body me great

here fiddle: http://jsfiddle.net/fabubaracus/d9j3s/

you can draw adjustable arc using kinetic.shape.

a demo: http://jsfiddle.net/m1erickson/rzrvx/

first create arc:

var arc = new kinetic.shape({   scenefunc: function(context) {     context.beginpath();     context.beginpath();     context.arc(this.cx,this.cy,this.radius,-pi2/4,pi2*this.arcpercent/100-pi2/4);     // kineticjs specific context method     context.fillstrokeshape(this);   },   stroke: 'green',   strokewidth:25 }); 

then add properties arc define how big arc be:

arc.cx=100; arc.cy=100; arc.radius=75; arc.arcpercent=33;  // percent 0-100 

and create function can use adjust sweep of arc

function setarcpercent(percent){     arc.arcpercent=percent;     layer.draw(); }