Question

我如何在画布上画出大量图像？

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

我的示例代码（jsfiddle：http://jsfiddle.net/6sunguw4/）：

 $(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];
        });

Answer 1

你可以用代码本身做很多事情。 drawImage看起来非常优化，而且图像的原始数量可能会减慢速度。

根据您的目标，您可以做的一件事就是准备合成图像。例如，这3个图像可以很容易地转换成单个PNG图像，然后它只需要一个drawImage调用。但是，如果你打算转移他们的位置或一些效果，我担心你会被你所拥有的东西困住。

Answer 2

这是从您放入数组的URL加载所有图像的代码，无需手动编写2000次new Image/.onload/.drawImage（我在下面的示例代码中调用数组imageURLs）：

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

}

为了获得更好的装载效果：

浏览器通常一次只从一个域下载6-8个文件。因此，您的2000图像需要2000/8 == 250个单独的顺序调用才能加载您的域。

您可以将2000组合成一个或多个spritesheets（最好是6个或更少的spritesheets）。这样浏览器就可以在一次旅行中下载包含2000个图像的1-6个精灵表。

您可以使用context.drawImage的扩展版本从spritesheet中提取任何所需的图像。例如，假设您需要的图像位于spritesheet上的[200,200]，大小为100x100。您可以在画布上绘制该图像，如下所示：

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

Javascript canvas如何drawImage很多图像

2 个答案: