javascript - Canvas animating a pie chart -

I'm trying to revive the pie chart without using any plug-ins. May meet, but not quite. There is a difference between each segment because the incremental value is set to ++ Can someone recommend a clean solution to my problem? Here's my

  var canv2 = document.getElementById ("canvas2"); Var ctx2 = canv2.getContext ("2D"); Var r = 60, sAngle = 0, angle = 0, eengal = 0; Var interval2 = setInterval (function () {if (angle == 0) {ctx2.beginPath (); sAngle = 0;} and if (angle == 90) {ctx2.beginPath (); sAngle = Math.PI * 0.5 ;} And if (angle == 180) {ctx2.beginPath (); sangl = Math.PI;} and if (angle == 270) {ctx2.beginPath (); sangal = Math.PI * 1.5;} and if (Angle == 360) {ctx2.beginPath (); Sengel = Math.PI * 2;} and (if (angle> gt & amp; amp; amp; amp; amp; angle & lt; 90) {ctx2.arc ( 200, 80, R, S Engel, ENGL); ctx2.lineTo (200, 80); ctx2.fillStyle = "red"; ctx2.fill ();} and if (angle> 90 & amp; amp; amp; ; Angle & lt; 180) {Ctx2.arc (200, 80, R, Sainle, ENGL); Ctx2.lineTo (200, 80); Ctx2.fillStyle = "green"; ctx2.fill ();} and if ( Angle> 180 & amp; amp; & amp; Angle & Lt; 270) {ctx2.arc (200, 80, r, sngle, eAngle); ctx2.lineTo (200, 80); ctx2.fillStyle = "orange"; ctx2.fill ();} and if (angle & gt ; 270 & amp; amp; & amp; amp; & amp; amp; & amp; amp; Engangle & lt; 360) {ctx2.arc (200, 80, r, sngle, eAngle); ctx2.lineTo (200, 80); ctx2.fillStyle = "blue "; Ctx2.fill ();} other {clear interval (interval 2); }} Angle ++; EAngle = Angle * Monastery. PI / 180; }, 10)  

There is a demo you were really close to you. And must update your eagle.

  if (angle == 0) {ctx2.beginPath (); SAngle = -0.001; } And if (angle == 90) {ctx2.beginPath (); SAngle = Math.PI * 0.501; } And if (angle == 180) {ctx2.beginPath (); SAngle = Math PI-1011; } And if (angle == 270) {ctx2.beginPath (); SAngle = Math.PI * 1.501; } And if (angle == 360) {ctx2.beginPath (); SAngle = Math.PI * 1.999; } And (if (angle and gt; 0 and amp; amp; angle & lt; 90) {ctx2.arc (200, 80, r, sAngle, eAngle + .02); ctx2.lineTo (200, 80 ); Ctx2.fillStyle = "red"; ctx2.fill ();} and if (angle> 90 and & amp; angle> 180) {ctx2.arc (200, 80, r, sAngle, eAngle + .02); Ctx2.lineTo (200, 80); Ctx2.fillStyle = "green"; ctx2.fill ();} and if (angle> 180 & amp; amp; amp; & amp; engangle <270) {Ctx2.arc (200, 80, r, sAngle, eAngle + .02); Ctx2.lineTo (200, 80); ctx2.fillStyle = "orange"; ctx2.fill ();} and if (angle> 270 & amp; amp; amp; amp; amp; amp; angle & lt; 360) {ctx2.arc (200, 80, r, sAngle, eAngle + .02); CTX2.lineTo (200, 80); Ctx2 .fillStyle = "blue"; ctx2.fill ();} other {clear interval (interval 2);}}  

I think it's better to render It may be found working on it.

Edit:

Edit: