javascript - JavaScript setInterval()関数がキャンバスへの描画で機能しない

原文 javascript canvas html5-canvas

キャンバスに線を引こうとしています。時間とともに線を動かすようにしています。そのために次のコードを使用しています

var ctx = mycanvas.getContext('2d');
ctx.beginPath();
for (var x = 0; x < 200; x++) {
    setInterval(draw(x, 0, ctx), 3000);
    x = x++;
}


そして、ここにドロー機能があります

function draw(x, y, ctx) {
    ctx.moveTo(10 + x, 400);
    ctx.lineTo(11 + x, 400);
    ctx.lineWidth = 10;
    ctx.strokeStyle = "#ff0000";
    ctx.stroke();
}


しかし、setInterval()関数は機能せず、線は即座に描画されています。 3秒後に次のピクセルに進むのを待っていません。
私は間違いをしていますか?
答え
setIntervalには、最初のパラメーターとして関数が必要です。現在、draw(x,0,ctx)を呼び出すだけで、undefinedが返されます。したがって、コードはsetTimeout(undefined、3000)と同等です。

代わりに、呼び出し可能な関数を提供し、その関数からdrawを呼び出す必要があります。これを試して:

setInterval(function() {
    draw(x, 0, ctx);
}, 3000);


もう1つの問題は、ループ動作の典型的な閉鎖によるものです。 xの個々の値を処理できるようにするには、個別のスコープを作成する必要があります。

for (var x = 0; x < 200; x++) {
    (function(x) {
        setInterval(function() {
            draw(x, 0, ctx);
        }, 3000 * x);
    })(x);
    x = x++;
}


また、このような状況を修正する方法の例については、thisの質問を確認してください。
関連記事

javascript - MathJaxを使用した数学方程式のWYSIWYGエディター

javascript - iOS 8のスクロール時の背景画像のちらつきの問題

javascript - JavaScriptのswitchステートメントを使用してDIV内にHTMLテーブルを表示する

javascript - jquery onclickイベントのページにJavaScriptコードを追加する

javascript - 背景画像ズーム

javascript - D3:ラベルテキストが続く入力要素を作成する方法?

javascript - Symfony2でjQuery dataTablesを使用する|教義| Twigプロジェクト-いくつかの機能を組み合わせて、データテーブルに結果を表示するタグフィルターを選択する

javascript - Dragonfly(Opera)をHTML / CSSエディターとして使用する

javascript - (サードパーティの)ClojureScript関数を別の名前空間から再定義する

javascript - 背景のスタッター/ラグの移動