将图像放在数组中并显示它们

我在将图像放入数组中并将它们显示在画布对象中时遇到了一些麻烦。将图像放在数组中并显示它们

的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

将图像放在数组中并显示它们

回答

相关问题