1

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

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>

我究竟做错了什么？

谢谢！

4

2 回答 2

2

你必须迭代你的<img>元素.slides，如下所示 

        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-30T22:45:19.627 回答
1

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

前面的代码返回 a NodeList，其中包含您的<div class="slides">，而不是图像。

要获取元素的直接子.slides元素的所有图像，您可以执行以下操作：

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

注意：您必须等到图像加载完毕才能在画布上绘制它们。使用load事件来确定它们何时被加载。但是，如果您在window.load事件处理程序中执行代码，就可以了。

于 2013-04-30T22:45:21.377 回答