Javascript 在HTML5中向画布显示一系列图像的最佳方式？

正如标题所述，我试图将一系列图像放入一个数组中，然后用HTML5将它们绘制到画布上，我没有收到任何错误，但没有显示任何内容。我是HTML5新手，所以有点麻烦

以下是我所拥有的：

    var canvas = document.querySelector('Canvas');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    var ctx = canvas.getContext('2d');


    function drawImagesToCanvas() {
        var imageArray = new Array();
        imageArray[0] = "graphics/1.png";
        imageArray[1] = "graphics/2.png";
        imageArray[2] = "graphics/3.png";
        imageArray[3] = "graphics/4.png";
        imageArray[4] = "graphics/5.png";
        imageArray[5] = "graphics/6.png";
        imageArray[6] = "graphics/7.png";
        imageArray[7] = "graphics/8.png";
        imageArray[8] = "graphics/9.png";
        imageArray[9] = "graphics/10.png";

        ctx.drawImage(imageArray[0], 120, 280, 220, 150);

    }

---

我认为可能是文件路径，但我尝试了多种变体。

您没有向drawImage提供源URL；它想要图像本身。可以从DOM元素或通过在代码中构造图像对象来读取，如下所示：

var canvas=document.querySelector'canvas'； canvas.width=window.innerWidth； canvas.height=window.innerHeight； var ctx=canvas.getContext'2d'； 函数drawImagesToCanvas{ var imageArray=新数组； 图像阵列[0]=https://placehold.it/220x150; // ... var img=新图像； img.onload=函数{ ctx.drawImageimg，20,80,220,150； }; img.src=imageArray[0]； } 帆布画；

---

你看过文件了吗？drawImage只接受少数数据类型作为参数来测试文件路径将路径放在URL栏中进行测试，对于您当前的示例来说，因为路径不是以a开头的/测试路径，例如：如果页面是http://example.org/folder1/mypage.html 像http://example.org/folder1/graphics/1.pngHi，谢谢你的回复。我已经交换了代码，仍然没有改变。我的画布是空白的。有什么想法吗？我把代码改成了一个功能片段，这样你就可以看到它在工作了。还删除了一些无意中包含的ES6语法，这可能是问题所在。对不起