html5 - Smoothly rotating a canvas element on setInterval() -

html5 - Smoothly rotating a canvas element on setInterval() -

i trying replicate effect: http://codepen.io/kenjispecial/pen/enrbq

i have segment class:

function segment (x, y, length) { this.x = x; this.y = y; this.length = length; this.rotation = 0; this.color = '#fff'; }

i utilize fill screen vertical lines (made out of segments) , rotate each of them 45deg clockwise using function , setinterval:

function drawsegments(segment) { segment.rotation = angle; segment.draw(ctx); } setinterval(function(){ angle += 45 * math.pi / 180; }, 800);

it works (i.e. lines rotated on each 800ms) there no animation between transitions.. tried somethig this, unfortunately doesn't work...

for (var = 0; < 360; i++) { angle += * math.pi / 180; }

so, problem - how animate each rotation of segments?

here link live demo: http://codepen.io/gbnikolov/pen/kegzj

html5 animation canvas