context.strokeText使用爲

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 ...這只是覆蓋舊的行程.. 這是目前住在這裏： http://worms.azurewebsites.net/# 如果按下播放按鈕，你會看到藍色酒吧移動到30，從這裏數字應該移動到左邊。這有點奏效（令人震驚的開始），但如果您等待幾秒鐘，您可以看到新號碼出現並消失。

我不能想出一個辦法來額外的號碼添加到畫布上..

Answer 1

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

這種計算不可能是正確的 - 它不依賴於i（或任何在循環過程中發生變化的其他變量），所以你只是在相同的地方繪製相同的東西。它在上面的行中與t[i]相同。也許你的意思是這樣的？

t[i] = add + 35 + 30 * i; // Just guessing here on how i and t relate... 
x[i] = -pos + (30 * i + 60);