setInterval을 사용하여 캔버스에 애니메이션을 적용하는 방법

Question

Canvas 라이브러리를 사용하여 호를 그리려합니다. 첫 번째 파란색 호가 그려 지지만 setInterval 내부에서는 아무 것도 일어나지 않습니다 (setTimeout과 동일한 동작). 어떻게 Canvas를 사용하여 동적으로 물건을 만들 수 있습니까?

var canvas = Canvas.createView(); 

canvas.begin(); 

canvas.arc(120, 120, 50, 0 * Math.PI, 2 * Math.PI, 0); 
canvas.lineWidth(10); 
canvas.strokeStyle('blue'); 
canvas.stroke(); 

var pointFrom = 1.5; 

var interval = setInterval(function() { 
    var pointTo = pointFrom - 0.5; 

    console.log('pointFrom : ' + pointFrom); 
    console.log('pointTo : ' + pointTo); 
    canvas.arc(120, 120, 50, pointFrom * Math.PI, pointTo * Math.PI, 1); 
    canvas.lineWidth(15); 
    canvas.strokeStyle('red'); 
    canvas.stroke(); 

    pointFrom = pointTo; 

    if (pointFrom < 0) clearInterval(interval); 
}, 2000); 

my_view.add(canvas); 

Thanks 

Answer 1

가

canvas.begin() 
canvas.arc(120, 120, 50, pointFrom * Math.PI, pointTo * Math.PI, 1) 
canvas.stroke() 
canvas.commit() 

이 간격 기능에 있어야합니다 :

여기 내 코드입니다.