Javascript 动态创建图像时，为什么图像数组为空？

我试图做的是动态加载图像，然后在屏幕上绘制它们。但是，当我调用console.log（images）时，它是空的

代码如下：

if (canvas.getContext)
{
  var ctx = canvas.getContext("2d");
  var images = new Array();
  for (i = 0; i < mattes_array.length; i++)
  {
    var imgsrc = mattes_array[i]["imgsrc"];
    var total_size = mattes_array[i]["total_size"];
    var cpu = mattes_array[i]["cpu"];
    var cid = mattes_array[i]["cid"];

    var imageObj = new Image();
    imageObj.onload = function() {
      images[i] = imageObj;
      console.log(images[i]);
    };
    imageObj.id = "matte_" + cid;
    imageObj.src = imgsrc;

  }

  console.log(images); //this is empty
  for (i = 0; i < mattes_array.length; i++)
  {
    var imgsrc = mattes_array[i]["imgsrc"];
    var total_size = mattes_array[i]["total_size"];
    var cpu = mattes_array[i]["cpu"];
    var cid = mattes_array[i]["cid"];

    var pattern = ctx.createPattern(images[i], 'repeat');
    ctx.strokeStyle = pattern;
    ctx.lineWidth = width - opening_width - (total_size * 2);
    ctx.strokeRect(0, 0, width, height);
  }
}

if（canvas.getContext）
{
var ctx=canvas.getContext（“2d”）；
var images=新数组（）；
对于（i=0；i

我也尝试过一次循环，但似乎只画了最后一张图：

if (canvas.getContext)
{
  var ctx = canvas.getContext("2d");
  var images = new Array();
  for (i = 0; i < mattes_array.length; i++)
  {
      var imgsrc = mattes_array[i]["imgsrc"];
      var total_size = mattes_array[i]["total_size"];
      var cpu = mattes_array[i]["cpu"];
      var cid = mattes_array[i]["cid"];


      var imageObj = new Image();
      imageObj.onload = function() {
        var pattern = ctx.createPattern(imageObj, 'repeat');
        ctx.strokeStyle = pattern;
        ctx.lineWidth = width - opening_width - (total_size * 2);
        ctx.strokeRect(0, 0, width, height);
      };
      imageObj.id = "matte_" + cid;
      imageObj.src = imgsrc;

  }
}

if（canvas.getContext）
{
var ctx=canvas.getContext（“2d”）；
var images=新数组（）；
对于（i=0；i

下面是我正在尝试做的一个图像：

---

图像以异步方式加载。你试图在它们加载之前绘制它们。尝试一下：

if (canvas.getContext)
{
  var ctx = canvas.getContext("2d");
  var images = new Array();
  var loaded = 0;
  for (i = 0; i < mattes_array.length; i++)
  {
    var imgsrc = mattes_array[i]["imgsrc"];
    var total_size = mattes_array[i]["total_size"];
    var cpu = mattes_array[i]["cpu"];
    var cid = mattes_array[i]["cid"];

    var imageObj = new Image();
    imageObj.onload = function() {
      images[i] = imageObj;
      console.log(images[i]);
      if ( ++loaded === mattes_array.length ) onloaded();
    };
    imageObj.id = "matte_" + cid;
    imageObj.src = imgsrc;

  }

  function onloaded() {
    console.log(images); //this is won't be empty anymore
    for (i = 0; i < mattes_array.length; i++)
    {
      var imgsrc = mattes_array[i]["imgsrc"];
      var total_size = mattes_array[i]["total_size"];
      var cpu = mattes_array[i]["cpu"];
      var cid = mattes_array[i]["cid"];

      var pattern = ctx.createPattern(images[i], 'repeat');
      ctx.strokeStyle = pattern;
      ctx.lineWidth = width - opening_width - (total_size * 2);
      ctx.strokeRect(0, 0, width, height);
    }
  }
}

if（canvas.getContext）
{
var ctx=canvas.getContext（“2d”）；
var images=新数组（）；
var=0；
对于（i=0；i

是console.log（images[i]）；还空着吗？你的for loopNo中的一个，它只显示一个图像的图像数据，但是它显示了3次（总共有3个图像）我在执行控制台时也得到了奇怪的结果。onload函数中的log（I）-我在一个测试中得到了0,0,38，在另一个测试中得到了0,0,0。你的第二个例子：你看到最后一个图像是因为

宽度
，
开口\u宽度
和
高度
均相同。循环的
中没有任何更改。你正在把它们一个接一个地画出来。第一个例子是类似的。但是当我用颜色来代替图片的笔画样式时，它是正确的。我必须使用一种叫做“闭包”的东西，就像在这篇文章中一样。它仍然只加载了一个图像（第一个或最后一个，我不知道，因为它们是相同的），这就是我所做的：var imageObj=new image（）；imageObj.onload=（函数（i）{images[i]=imageObj；返回函数（）{console.log（i）；console.log（images[i]）；if（++load==mattes_array.length）onload（）；}）（i）；imageObj.id=“无光”+cid；imageObj.src=imgsrc；