每次更改后刷新画布答案

【问题标题】：refresh canvas after every change每次更改后刷新画布
【发布时间】：2016-11-24 17:45:04
【问题描述】：

我正在尝试将图像内容逐个像素地复制到画布中，并且我希望在它发生时将其可视化。但是，在该过程进行时画布只是保持空白，然后当它完成时，克隆的图像将完整显示。每次像素变化后，画布有什么方法可以“刷新”或“重新加载”？

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

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描述的生成器函数

标签： javascript html canvas html5-canvas

【解决方案1】：

我最终通过使用here 描述的 setIntervalX 函数实现了这一点，延迟时间为 1 毫秒。逐行绘制，而不是逐像素绘制，但这对我来说已经足够了，而且可能更有效。使用上面 cmets 中建议的生成器函数 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);
    }
}

【讨论】：