使用請求動畫框在畫布中動畫繪製線條

Question

我正在努力使用請求動畫框架創建線條繪畫動畫。雖然我使用setInterval函數一切工作正常，但我讀的地方要求ani框架更加優化，並且間隔中的所有函數都應該以這種方式編寫。

因此，這裏是我的代碼：

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。基本上我只想繪製一個正方形，所以我不需要任何對角線移動，這就是爲什麼我添加了方向參數。

我是新來的畫布和要求ani框架，所以任何幫助將更有用。

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遞增