Question

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

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>

我做错了什么？

谢谢！

Answer 1

您要迭代<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索引开头）

Answer 2

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

之前的代码会返回包含NodeList的{{1}}，而不是图片。

要获取<div class="slides">元素的直接子项的所有图像，您可以执行以下操作：

.slides

注意：在将图像绘制到画布上之前，您必须等到图像加载完毕。使用var images = document.querySelectorAll('.slides > img');事件确定何时加载它们。但是，如果在load事件处理程序中执行代码，则可以正常运行。

将图像放入数组并显示它们

2 个答案: