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 回答