每次更改后刷新画布

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); 
    } 
}