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調用。但是，如果你打算改變他們的地點或某些效果，恐怕你被困住了。