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

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(图像[加载++],dx,dy,100,100"和两个图像分别绘制,但他们的顺序是随机的.

有没有办法使用这样的函数在画布上绘制图像？

Answer 1

尝试改变:

image = new Image();

至:

var image = new Image();

目前,您正在全局范围内设置"image",然后可能在加载(不会同步发生)之前重写其onload处理程序.