javascript - 每次更改后刷新 Canvas

我正在尝试将图像内容逐像素复制到画布中，我希望在发生这种情况时将其可视化。但是，画布在处理过程中只是保持空白，然后在完成时完全显示克隆的图像。每次更改像素后，画布是否可以“刷新”或“重新加载”？

这是我正在使用的部分代码：

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是克隆的上下文对象。
我仅出于可视化目的对此感兴趣。我知道这可能不太有效。

最佳答案

我最终通过使用描述为here的setIntervalX函数（延迟为1毫秒）来做到这一点。逐行绘制，而不是逐像素绘制，但这对我来说已经足够好了，可能会更高效。 Jon在上面的注释中建议的生成器功能可能会使代码更整洁，但是我已经为此花了很长时间了，我只需要一些有效的方法即可:)

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