画像の内容をピクセルごとにキャンバスにコピーしようとしていますが、それが発生している間、それを視覚化したいと思っています。ただし、プロセスの実行中はキャンバスが空白のままになり、プロセスが終了すると、複製された画像が完全に表示されます。ピクセルが変更されるたびにキャンバスを「更新」または「再読み込み」する方法はありますか？
これが私が使用しているコードの一部です：
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-クローンのコンテキストオブジェクトです。私はこれを視覚化の目的でのみ興味があります。私はそれがおそらくあまり効率的ではないことを知っています。
ここで説明する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);
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加