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的调用每次调用时都会创建对所有变量的新引用。它与onload不同，因为它是立即调用的，而onload是一个回调，必须等到当前正在执行的上下文完全退出（换句话说返回直到没有更多的返回），然后才会然后可以发生转载。

将多个图像加载到多个画布中

1 个答案: