Javascript画布如何绘制大量图像

我怎样才能在画布上画出很多图像

我有很多图片url数组，需要输出它。如何做与良好的表现

me示例代码（JSFIDLE:）：

 $(document).ready(function () {
            var bgCanvas = document.getElementById("bgCanvas");
            var bgCtx = bgCanvas.getContext("2d");

            bgCanvas.width = window.innerWidth;
            bgCanvas.height = window.innerHeight + 200;


            var array = new Array();
            array[1] = 'https://developer.chrome.com/webstore/images/calendar.png';
            array[2] = 'http://www.w3schools.com/html/html5.gif';
            array[3] = 'http://www.linosartele.lt/wp-content/uploads/2014/08/images-9.jpg';

            img0 = new Image();
            img0.onload = function() {
                bgCtx.drawImage(img0, 0,0, 100, 100);
            }
            img0.src = array[1];


            img2 = new Image();
            img2.onload = function() {
                bgCtx.drawImage(img2, 100,0, 100, 100);
            }
            img2.src = array[2];

            img3 = new Image();
            img3.onload = function() {
                bgCtx.drawImage(img3, 200,0,100,100);
            }
            img3.src = array[3];
        });

---

对于代码本身，您无能为力。drawImage看起来非常优化，而原始图像的数量可能会降低速度

---

根据你的目标，你可以做的一件事就是准备合成图像。例如，这3个图像可以很容易地转换为单个PNG图像，然后只需要一个drawImage调用。但是，如果你打算改变它们的位置或某些效果，恐怕你会被你所拥有的东西所束缚。

下面的代码可以从你放入数组的URL中加载所有图像，而无需手动编写2000次代码

new Image/.onload/.drawImage

（我在下面的示例代码中称为数组imageURLs）：

---

如何输出所有数组因为我有很多关于2000的图像，我不能写手..在数组中循环并绘制每个。“你想实现什么，为什么是画布？”Asker。删除

img.crossOrigin=“anonymous”

，它应该可以工作。我在自己的项目中默认设置了此标志，但如果要加载跨域图像，则必须将其删除。；-）

// image loader

// put the paths to your images in imageURLs[]
var imageURLs=[];  
// push all your image urls!
imageURLs.push('https://developer.chrome.com/webstore/images/calendar.png');
imageURLs.push('http://www.w3schools.com/html/html5.gif');
imageURLs.push('http://www.linosartele.lt/wp-content/uploads/2014/08/images-9.jpg');

// the loaded images will be placed in imgs[]
var imgs=[];

var imagesOK=0;
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){

    // the imgs[] array now holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]

    bgCtx.drawImage(imgs[0], 000,0, 100, 100);
    bgCtx.drawImage(imgs[1], 100,0, 100, 100);
    bgCtx.drawImage(imgs[2], 200,0, 100, 100);

}

bgCtx.drawImage(spritesheet,
    200,200,100,100    // clip the image from the spritesheet at [200,200] with size 100x100
    125,250,100,100    // draw the clipped image on the canvas at [125,250]
);