Javascript画布如何画图像很多图像

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

这里的代码加载从你把你的数组中的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组合成一个或多个spritesheet（最好是6个或更少的spritesheets）。这样浏览器就可以在一次旅行中下载包含2000张图片的1-6张spritesheet。

您可以使用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] 
); 

Answer 2

有没有什么你可以用代码本身做。 drawImage看起来非常优化，而这是图像的原始数量可能会减慢速度。

根据您的目标，您可以做的一件事是准备复合图像。例如，这3幅图像可以很容易地转换为单个PNG图像，然后只需要一次drawImage调用。但是，如果你打算改变他们的地点或某些效果，恐怕你被困住了。