context.strokeText 使用 for

Question

我试图在我的画布上获取大量数字。正在使用计时器上的事件处理程序重复我的代码。

每经过 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，从这里开始，数字应该向左移动。这有点工作（令人震惊的开始），但如果您等待几秒钟，您会看到新数字出现和消失。

我只是想不出办法在画布上添加一个额外的数字..

Answer 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);