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;它想要图像本身。这可以从DOM元素中读取，也可以通过在代码中构造Image对象来读取，如下所示：

＆＃13;

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();

＆＃13;

<canvas></canvas>

＆＃13;

在HTML5中向画布显示图像数组的最佳方法？

1 个答案: