繪製連續幀到HTML5畫布只顯示最後一幀

我有這個複雜的循環計算什麼，我想在canvas元素展示各種靜止幀。框計算它每次都會看到顯示我所說的定時器，等到我清除它，然後顯示下一幀等。繪製連續幀到HTML5畫布只顯示最後一幀

drawing(transform(alone, Box, canvasx.width, canvasx.height), false, "00f", canvasx); 
    drawing(transform(Lines, Box, canvasx.width, canvasx.height), false, "ff0000", canvasx); 

    var date = new Date(); 
    var curDate = null; 

    do { 
     curDate = new Date(); 
    } 
    while (curDate - date < 550); 

    if (alone.length > 0) { 
     canvasx.width = canvasx.width; 
    }

，如果我把在VAR日線，然後按一個破發點，每次玩，得到顯示的每個單獨的幀，但是當我讓它通過在畫布上運行是空的，而它運行，並在年底它顯示最近幀。

現在如果我刪除canvasx.width = canvasx.width;我仍然得到同樣的行爲只明顯處於最後我拿得出一個在另一個之上的所有幀。

顯然它不是一個動畫，所以我不能調用圖形中的setInterval。

沒有任何人有任何想法，爲什麼;

來源

2011-01-09 elasticrash

你有使用setTimeout而不是你的循環。

// JavaScript is single thread, and this BLOCKS the re-rendering and display of the canvas 
do { 
    curDate = new Date(); 
} 
while (curDate - date < 550);

而且我寧願使用context.clearRect（見MDC），而不是調整大小，沒有表現任何區別。

東西沿着這些線路應該這樣做：

function drawCanvas() { 
    if (alone.length > 0) { 
     // clear canvas 
    } 
    drawing(transform(alone, Box, canvasx.width, canvasx.height), false, "00f", canvasx); 
    drawing(transform(Lines, Box, canvasx.width, canvasx.height), false, "ff0000", canvasx); 
    setTimeout(drawCanvas, 550); 
}

切勿模仿sleep在JavaScript中，你會阻止，而你sleeping做任何事情的整個瀏覽器。

來源

2011-01-09 13:59:29

事情是它的一個while循環計算每次新結果時，我試圖將結果發送到像你寫的那樣的函數，但顯然是徒勞的，因爲如果while循環不會完成，畫布不會得到更新。我想出了一個愚蠢的解決方案，以顯示我想要的，但它只是正常工作對鉻。 http://www.elasticrash.info/demos/003/index.html因爲我彈出並關閉模態 – elasticrash 2011-01-09 14:23:37

繪製連續幀到HTML5畫布只顯示最後一幀

回答

相關問題