이미지 내용을 캔버스에 픽셀 단위로 복사하려고하는데, 그 동안 시각화되기를 원합니다. 그러나 캔버스는 프로세스가 진행되는 동안 빈 상태로 유지되고 완료되면 복제 된 이미지가 전체로 표시됩니다. 모든 픽셀 변경 후 캔버스를 "새로 고침"또는 "다시로드"할 수있는 방법이 있습니까?
다음은 내가 사용중인 코드의 일부입니다.
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] 삭제
몇 마디 만하겠습니다