javascriptバグcanvasでputImageData関数がforループ内にある

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); 
} 

私は私のブラウザ（Firefoxの）でこのコードを実行しようとするページは、単に私が待ってどのくらいに関係なくロードに失敗し、そして、私はロードを停止したい場合は、最終的に、私に尋ねますプロセス。この問題は私のfor-loopにあると思われます。なぜなら、コードのインスタンスを1つ実行すれば、それが機能するからです。私はそれをループに入れた瞬間、ロードしないことに戻ります。代わりにwhileループを使用しても、これは当てはまります。私はputImageDataが遅くなることがあることを知っていますが、私はループを無限にする何か明白なものを見逃しているように感じますが、私はそれを見つけることができません。

Answer 1

画像データを直前に取り込もうとしている場合は、空のキャンバスが表示されている可能性があります。画像をプリロードした後にのみコードを実行してください。

picToAlter.addEventListener('load', yourDrawingMethod) 

また、あなたのfor-loopは、おそらくあなたの期待通りの動作をしていない可能性があります。 can.widthにヒットしたくないのは、ゼロから始まっているため実際には範囲外になるからです。また、反復文は実際に反復処理されていません。 i = i+10またはi+=10のような代入演算子を使用する必要があります。これらの問題を考慮すると、このようなものになります。

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