Question

我试图将图像内容逐个像素地复制到画布中，我希望在它发生时将其可视化。但是，在进程正在进行时，画布只保持空白，然后在完成时，克隆的图像将完整显示。画布是否有任何方式可以刷新＆＃34;＃34;或者＆＃34;重新加载＆＃34;每个像素改变后？

以下是我使用的代码的一部分：

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毫秒。逐行绘制，而不是逐像素绘制，但它对我来说足够好，可能更有效。代码可能与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);
    }
}

每次更改后刷新画布

1 个答案: