HTML5 画布和 drawImage

Question

我正在构建一个图表编辑器，它工作正常，拖放、复制和粘贴一切工作正常。但我在图像方面遇到了麻烦。我有一个每次发生变化时都会运行的 render() 函数。在渲染函数内部，我调用了 appendImg 代码。这在第一次运行渲染时非常有效。但是下一次，我进入 else 代码块，图像没有在画布上呈现。我有这个 if.else 逻辑她，因为如果我每次运行 img.onload somthing 更改每次加载图像，我会在屏幕上得到很多闪烁。 据我所知，当 img obj 已存储在数组中时，drawImage 会很喜欢它，但我似乎无法理解它。

var images = []; //An array where images are stored.

appendImg = function(inx, url, x, y, w, h) {

  if (!images[inx]) {
    var img = new Image();
    img.onload = function()
    {
        dg_context.drawImage(img, x, y, w, h);
        images[inx] = img;
    }
    img.src = url;
  }else{
    var img = images[inx];
    console.log(img);
    dg_context.drawImage(img, x, y, w, h);
  }
}

Answer 1

尝试将 inx 存储为 img 的属性，以便在 onload 中记住 inx：

var images = []; //An array where images are stored.

appendImg = function(inx, url, x, y, w, h) {

  if (!images[inx]) {
    var img = new Image();
    img.onload = function()
    {
        dg_context.drawImage(img, x, y, w, h);
        images[img.index] = img;
    }
    img.index=inx;
    img.src = url;
  }else{
    var img = images[inx];
    console.log(img);
    dg_context.drawImage(img, x, y, w, h);
  }
}