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

Animate line drawing in canvas using request animation frame

本文关键字：动画 绘制 布中 请求      更新时间：2023-09-26

我正在努力使用请求动画帧创建线条绘制动画。当我使用setInterval函数时，一切都很好，但我在某个地方读到，请求ani框架要优化得多，interval中的所有函数都应该以这种方式编写。

这是我的代码：

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

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

我是画布的新手，请求一个框架，所以任何帮助都会更有用。

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

当将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递增

相关文章：