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

Question

我要做的是动态加载图像然后在屏幕上绘制它们。但是，当我调用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 = 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;

  }
}

这是我想要做的事情的图像：

Answer 1

图像异步加载。你试图在它们加载之前绘制它们。试一试：

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