캔버스가있는 javascript 버그 forI-loop 내부의 putImageData 함수

Question

HTML 캔버스에서 픽셀 수준의 조작으로 놀고 있었고 putImageData() 기능으로 버그가 발생했습니다. 내가로드를 중지하려면

var can = document.getElementById("canvasID"); 
var ctx = can.getContext("2d"); 
var picToAlter = document.getElementById("image"); 
var pix = ctx.createImageData(1, 1); 
var colData = pix.data; 
colData[someNumber] = someValue; 
ctx.drawImage("image", 0, 0); 
for(let i=0;i<=can.width; i+10){ 
    ctx.putImageData(pix, i, 0); 
} 

내 브라우저 (파이어 폭스) 페이지가 단순히 내가 결국, 기다린 시간에 상관없이로드 할 수없는이 코드를 실행하려고 나에게 묻는다 : 여기에 내 코드입니다 방법. 문제는 내 for-loop에있는 것처럼 보입니다. 코드의 단일 인스턴스를 실행하면 작동하기 때문입니다. 내가 루프에 넣는 순간, 그것은 로딩되지 않은 상태로 되돌아 간다. 대신 while 루프를 사용하더라도 마찬가지입니다. 나는 putImageData이 느릴 수 있다는 것을 알고 있지만 무한 루프를 만드는 명백한 것이 빠져있는 것처럼 느껴진다. 그러나 나는 그것을 찾을 수 없다.

Answer 1

이미지 데이터를 즉시로드하려는 경우 (미리로드하지 않고) 빈 캔버스가 표시됩니다. 이미지를 미리로드 한 후에 만 ​​코드를 실행해야합니다.

picToAlter.addEventListener('load', yourDrawingMethod) 

또한 for 루프는 예상대로 작동하지 않을 수 있습니다. can.width을 치고 싶지는 않습니다. 실제로 0에서 시작하기 때문에 범위를 벗어날 수 있기 때문입니다. 또한 반복문이 실제로 반복되지 않습니다. i = i+10 또는 i+=10과 같은 할당 연산자를 사용해야합니다. 이러한 문제를 고려하면 다음과 같이 끝납니다.

for(let i = 0; i < can.width; i+=10){ 
    // ... 
}