使用请求动画帧在画布中绘制线条动画

Question

我正在努力使用请求动画帧创建线条绘制动画。当我使用 setInterval 函数时，一切正常，但我在某处读到请求 ani 帧更加优化，并且间隔中的所有函数都应该以这种方式编写。

这是我的代码：

var topMinX = 3; 变量 topMaxX = 75; var topMinY = 2;
变量 topMaxY = 2; 变量最小值； 变量最大值;

//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

我不知道正方形绘图，但这里的问题似乎在于将变量传递给函数。

你在开始定义的那些变量在进一步传递给函数时不会改变

你可以在这里查看它的工作原理：

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 增加了