javascript - 为什么我不能使用 javascript 函数在 html Canvas 上绘制多个图像？

Question

我有一个像这样的 javascript 函数:

function drawImage(canvas, image_source, dx, dy) {
  image = new Image();
  image.src = image_source;  
  image.onload = function() {
    c=canvas.getContext("2d");
    c.drawImage(image,dx,dy,100,100);
  }
}

当我连续两次调用此函数时，例如:

drawImage(canvas, "foo.jpg", 0, 0);
drawImage(canvas, "bar.jpg", 0 ,100);

bar 被绘制两次，一次在 0，一次在 100
如果我切换顺序以便最后调用 foo，则 foo 会被绘制两次。

我试过为图像使用一个数组，如“c.drawImage(images[loaded++], dx, dy, 100, 100”，两个图像分别绘制，但它们的顺序是随机的。

有什么方法可以使用这样的函数在 Canvas 上绘制图像吗？

Answer 1

尝试改变:

image = new Image();

到:

var image = new Image();

目前您正在全局范围内设置“image”，然后可能会在加载(不会同步发生)发生之前重写它的 onload 处理程序。