在 HTML5 中将一组图像显示到画布的最佳方法是什么？

Question

正如标题所述，我正在尝试将一系列图像放入一个数组中，然后在 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);

    }

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

Answer 1

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

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] = "https://placehold.it/220x150";
  // ...

  var img = new Image(); 
  img.onload = function() {
    ctx.drawImage(img, 20, 80, 220, 150);
  };
  img.src = imageArray[0];
}

drawImagesToCanvas();

<canvas></canvas>