요청 애니메이션 프레임을 사용하여 캔버스에서 선 그리기 애니메이션 만들기

Question

요청 애니메이션 프레임을 사용하여 선 그리기 애니메이션을 만드는 데 어려움을 겪고 있습니다. setInterval 함수를 사용하는 동안 모든 것이 잘 작동했지만 어노테이션 프레임이 훨씬 더 최적화되었고 간격의 모든 함수가이 방식으로 작성되어야한다고 읽었습니다. 그래서 여기

내 코드입니다 :

var에 topMinX = 3; var topMaxX = 75; var topMinY = 2;
var topMaxY = 2; var min; var max;

//request animation frame 
    (function animate(){ 
     var t = setTimeout(function(){ 
      requestAnimFrame(animate); 
      var d = render(topMinX,topMaxX,topMinY,topMaxY,true); 
     },20); 

    })(); 

    function render(xMin,xMax,yMin,yMax,direction){ 
     if(direction){ 
      min = xMin; 
      max = xMax 
     }else{ 
      min = yMin; 
      max = yMax; 
     }  

     if(min<max){ 
      context.beginPath(); 
      if(direction){ 
       context.moveTo(xMin,yMin); 
       xMin = xMin+2; 
       alert(xMin); 
       context.lineTo(xMin,yMax); 
      }else{ 
       context.moveTo(xMin,yMin); 
       yMin = yMin+2; 
       context.lineTo(xMax,yMin); 
      }     
      context.lineWidth = 4; 
      context.stroke();    
     } 

    } 

문제는이 xMin 값이 증가하지 것입니다. 그것은 항상 경고 5 것입니다 그리고 나는 그것을 모든 반복에서 2 씩 증가 할 것으로 예상했다. 기본적으로 사각형을 그려야하므로 대각선 이동이 필요하지 않으므로 방향 매개 변수를 추가 한 것입니다.

저는 캔버스를 처음 사용하고 애니 프레임을 요청하므로 어떤 도움이 더 유용 할 것입니다.

Answer 1

사각형 그리기에 대해 알지 못하지만 여기서 문제는 변수 전달 함수에있는 것으로 보입니다. 함수로 furher 통과 할 때

당신이 처음에 정의한 그 변수

은 여기에 어떻게 작동하는지 확인할 수 있습니다

변경되지 않습니다

function swap(a, b) { 
    var tmp = a; 
    a = b; 
    b = tmp; //assign tmp to b 
} 

var x = 1, y = 2; 
swap(x, y); 

alert("x is " + x + " y is " + y); // "x is 1 y is 2" 

을 그리고 FIDDLE

에 귀하의 예를 들어 그것을 선을 그리고 topMinX가 증가합니다