每次更改後刷新畫布

Question

我試圖將圖像內容複製到畫布中，逐個像素地顯示，並且希望在發生這種情況時對其進行可視化。然而，畫布在處理過程中保持空白，然後完成時，克隆的圖像將全部顯示。是否有任何方式讓畫布在每次像素更改後「刷新」或「重新加載」？

這裏是我使用的代碼的一部分：

for (var x = 0; x < w; x++) { 
    for (var y = 0; y < h; y++) { 
     ctx2.putImageData(ctx1.getImageData(x,y,1,1),x,y); 
    } 
} 

...其中CTX1是原始和ctx2的上下文對象 - 克隆的上下文對象。 我只對可視化目的感興趣。我知道這可能不是很有效。

Answer 1

我設法做到這一點，最終通過使用描述爲here的setIntervalX函數，延遲1毫秒。逐行繪製，而不是逐像素，但對我來說足夠好，可能更有效。代碼很可能是整潔與發電機功能喬恩在上述意見建議，但我已經爭奪這個足夠長的時間已經和我只是需要一些作品:)

var x = 0; 
setIntervalX(function(){drawVerticalLine(ctx1,ctx2,x++,image_height)},1,image_width); 

function setIntervalX(callback, delay, repetitions) { 
    var r = 0; 
    var intervalID = window.setInterval(function() { 

     callback(); 

     if (++r === repetitions) { 
      window.clearInterval(intervalID); 
     } 
    }, delay); 
} 

function drawVerticalLine(ctx1,ctx2,x,image_height) { 
    for (var y = 0; y < image_height; y++) { 
     ctx2.putImageData(ctx1.getImageData(x,y,1,1),x,y); 
    } 
}