將圖像放在數組中並顯示它們

我在將圖像放入數組中並將它們顯示在畫布對象中時遇到了一些麻煩。將圖像放在數組中並顯示它們

的Jscript片斷

canvas = document.getElementById('slideshow'); 
canvasContent = canvas.getContext('2d'); 

var elements = document.getElementsByClassName('slides'); 

for (var index = 0; index <= elements.length; index += 1) 
{ 
    arrFoto[index] = elements[index]; 
} 

canvasContent.drawImage(arrFoto[huidigeIndex], 0, 0);

這是HTML文件

<div class="container"> 
       <div class="slides"> 
        <img src="data/images/slideshow/3.png" /> 
        <img src="data/images/slideshow/4.jpg" /> 
        <img src="data/images/slideshow/5.png" /> 


       </div> 
       <canvas id="slideshow" width="700" height="300"></canvas> 

      </div>

我在做什麼錯的一部分嗎？

謝謝！

來源

2013-04-30 Matt

爲什麼你需要創建一個數組，當你有一個可以以同樣的方式訪問的節點列表？ – adeneo 2013-04-30 22:37:58

哦，沒錯。但是現在我在繪製圖像時得到一個類型錯誤（canvasContent.drawImage（elements [huidigeIndex]，0，0）; – Matt 2013-04-30 22:41:32

你在div上有class =「slides」，而不是img項目......至少在你的例子中， – Tracker1 2013-04-30 22:43:37

你已經遍歷您.slides內<img>元素，如如下

 var canvas = document.getElementById('slideshow'); 
     var canvasContent = canvas.getContext('2d'); 
     var elements = document.getElementsByClassName('slides'); 

     var arrFoto = Array(); 

     for (var index = 0; index < elements.length; index++) { 
      var imgs = elements[index].getElementsByTagName('img'); 
      for(var x = 0; x < imgs.length; x++) 
       arrFoto[arrFoto.length] = imgs[x]; 
     } 

     for(var huidigeIndex=0; huidigeIndex < arrFoto.length; huidigeIndex++) 
      canvasContent.drawImage(arrFoto[huidigeIndex], 0, 0);

在你的代碼，你index <= elements（通知<=），這將使循環的最後一次迭代創建elements[index] is undefined之類的誤差（JS陣列從0開始的索引）

來源

2013-04-30 22:45:19 Ejaz

var elements = document.getElementsByClassName('slides');

前面的代碼返回一個NodeList那包含您的<div class="slides">，而不是圖像。

若要取得.slides元素的直接子的所有圖像，你可以這樣做：

var images = document.querySelectorAll('.slides > img');

注意：您將不得不等待，直到圖像繪製它們在畫布上之前加載。使用load事件來確定它們何時加載。但是，如果您在window.load事件處理程序中執行代碼，則將會很好。

來源

2013-04-30 22:45:21 plalx

將圖像放在數組中並顯示它們

回答

相關問題