0

キャンバスに大量の数字を取得しようとしています。タイマーのイベント ハンドラを使用してコードが繰り返されています。

5 秒経過するごとに、キャンバスに別の数字を追加したいと考えています。グラフの下に流れるタイムラインに使用されます。

forloop 自体は問題なく動作しますが、実行するたびに現在のストローク テキストが上書きされます。これが for です。

           pos = (time * (360 / 60) - 360); // calculate position in graph
            var t = new Array(); // array of numbers
            var x = new Array(); // array of xPos
            var y = new Array(); // array of yPos
            // new time number, position + distance to next number for each 5 seconds + compensation(60), yPos
            for (var i = 0 ; i < add / 5; i++) { // add / 5 is the count of numbers to add
                t[i] = add + 35;
                x[i] = -pos + (30 * (add / 5) + 60); // positions the number 30px next to the number before it.
                y[i] = 330;
            }
            for (var i = 0; i < t.length; i++) {
                ctx.strokeText(t[i], x[i], y[i]);  // draws the number
            }
            //this line here gives back the exact same result as the code above.
            //ctx.strokeText((add + 35).toString(), -pos + (30 * (add / 5) + 60), 330);

ctx で new を呼び出すことはできません...これは古いストロークを上書きするだけです..現在ここで公開されています: http://worms.azurewebsites.net/# 再生ボタンを押すと、青色が表示されますバーが 30 に移動します。ここから数値が左に移動するはずです。これはある程度機能していますが (衝撃的なスタート)、数秒待つと、新しい数字が表示されたり消えたりするのがわかります。

キャンバスに余分な数字を追加する方法がわかりません..

4

1 に答える 1

1

x[i] = -pos + (30 * (add / 5) + 60); // positions the number 30px next to the number before

この計算は正しくありません。i(またはループの過程で変化する他の変数) にまったく依存しないため、同じ場所に同じものをadd / 5何回も描画しているだけです。その上の行も同じですt[i]。たぶん、あなたはこのようなことを意味しますか？

t[i] = add + 35 + 30 * i; // Just guessing here on how i and t relate...
x[i] = -pos + (30 * i + 60);
于 2013-03-05T20:24:54.153 に答える