0

リクエストアニメーション枠を使って線画アニメーションを作ろうと奮闘中です。setInterval 関数を使用している間はすべて正常に動作していましたが、リクエスト アニ フレームがはるかに最適化されており、間隔内のすべての関数をこの方法で記述する必要があることをどこかで読みました。

だからここに私のコードがあります：

var topMinX = 3; var topMaxX = 75; var topMinY = 2;
var 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 ずつ増加すると予想していました。基本的には四角を描きたいだけなので、斜めの動きは必要ないので、方向パラメータを追加しました。

私はキャンバスに不慣れで、アニフレームをリクエストしているので、どんな助けも役に立ちます.

4

1 に答える 1

0

正方形の描画についてはわかりませんが、ここでの問題は関数への変数の受け渡しにあるようです。

最初に定義した変数は、関数にさらに渡すときに変更されません

ここでどのように機能するかを確認できます：

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 がインクリメントされます

于 2013-02-05T12:21:04.213 に答える