如何繪製使用for循環延遲的畫布？

var context = document.getElementById("canvas").getContext("2d"); 

for(var i = 0; i< savedMove.length; i++){ 
    doSetTimeout(i); 
} 

function doSetTimeout(i) { 
    setInterval(function() { animate(savedMove[i][0], savedMove[i][1]); }, 100); 
} 
function animate(xPos, yPos) { 
    context.fillStyle = "red"; 
    context.fillRect(xPos, yPos, 5, 5); 
}

我有每個x和y位置在二維數組（movingMove）內移動，我想用延遲繪製數組信息。但畫布不畫這個。我繼續調試，但我無法弄清楚問題所在。如何繪製使用for循環延遲的畫布？

來源

2016-01-21 Haroldy

你去哪裏定義'savedMove'陣列？只是檢查它是否可用之前，你用它for循環。我嘗試了你的代碼，當我用dummy項定義'savedMove'數組時，它確實在畫布上繪製了（儘管如此，並沒有延遲，正如Gavriel所解釋的那樣）。 –

在這裏，我寫的顏色是紅色的，但在我的代碼中，功能改變顏色。我意識到默認顏色是白色的。難怪我看不到圖片....感謝您的幫助 – Haroldy

您正在設置savedMove.length計時器，每100毫秒並行計時。我很確定這不是你想要的，儘管很難猜出它是什麼。首先，我會改變的setInterval到setTimeout和讓他們火在不同的時間，彼此100毫秒遠：

function doSetTimeout(i) { 
    setTimeout(function() { animate(savedMove[i][0], savedMove[i][1]); }, 100 * i); 
}

請注意，這不是做的最好辦法，但肯定比原來更好的代碼。

然後你就可以調試它，因爲你可能會引出可見帆布：

console.log("canvas size:", document.getElementById("canvas").width, document.getElementById("canvas").height); 

function animate(xPos, yPos) { 
    context.fillStyle = "red"; 
    context.fillRect(xPos, yPos, 5, 5); 
    console.log("animate:", xPos, yPos); 
}

來源

2016-01-21 01:25:57 Gavriel

如何繪製使用for循環延遲的畫布？

回答

相關問題