如何在畫布上繪制多個圖像

Question

我需要在自己的畫布上繪制圖像。 我究竟做錯了什么？ 如果我刪除“ for循環”，則代碼可以正常工作（例如：set var i = 0，然后在canv [0]中繪制img [0]）。

window.onload = function() {

    var canv = [];
    var ctx = [];
    var img = [];
    var info = [{"url":"1.jpg"},{"url":"2.jpg"},{"url":"3.jpg"}];

    for(i=0; i< 3; i++){

            canv[i]        = document.createElement('canvas');
            canv[i].width  = 460;
            canv[i].height = 620;
            canv[i].style.border = "1px solid";
            document.body.appendChild(canv[i]);

            img[i]     = new Image();
            img[i].src = info[i].url;

            ctx[i] = canv[i].getContext("2d");

            img[i].onload = function(){  
                ctx[i].drawImage(img[i], 10, 70, 440,440);
            }
    }
}

Answer 1

找到解決方案，以防萬一有人遇到相同的問題：

(function (_i) {
       img[_i] = new Image();
       img[_i].src = info[_i].url;              
       img[_i].onload = function () {
                ctx[_i].drawImage(img[_i], 10, 70, 440,440);
       };
 })(i);