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。基本上我只想绘制一个正方形，所以我不需要任何对角线移动，这就是为什么我添加了direction参数。

我是画布新手并请求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递增了

使用请求动画帧在画布中设置动画线条

1 个答案: