將多個圖像加載到多個畫布中

Question

我有一個用於將圖像加載到畫布中的代碼，它工作正常，但是當我嘗試迭代多次執行時，它只加載一個圖像（最后一個）。 誰知道為什么？

<pre id="output_1"></pre>
<canvas id="canvas_1"></canvas>
<pre id="output_2"></pre>
<canvas id="canvas_2"></canvas>
<script type="text/javascript">
    var pics = [ 'Desert.jpg', 'Hydrangeas.jpg' ];
    for(var i=0; i < pics.length; i++) {
        var img = new Image();
        var ctx = $( '#canvas_'+(i+1) )[0].getContext('2d');
        img.onload = function() { 
            ctx.drawImage(img, 0, 0);
        };
        img.src = pics[i];
    }
</script>

Answer 1

循環時會覆蓋var img 。 在當前執行完成之前，不會onload 。 到那時，img將等於第3次迭代。

修理

var pics = [ 'Desert.jpg', 'Hydrangeas.jpg' ];
function loadImage(i){
    var img = new Image();
    var ctx = $( '#canvas_'+(i+1) )[0].getContext('2d');
    img.onload = function() { 
        ctx.drawImage(img, 0, 0);
    };
    img.src = pics[i];
}

for(var i=0; i < pics.length; i++) {
     loadImage(i);
}

對函數loadImage的調用loadImage調用時loadImage創建對所有變量的新引用。 它與onload不同，因為它是立即調用的，而onload是一個回調，必須等到當前正在執行的上下文完全退出（換句話說返回直到沒有更多的返回），然后才能發生onload。