為什么我不能使用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);

條被塗兩次，一次在0，一次在100
如果我切換順序以便最后調用foo，則foo將被繪制兩次。

我試圖對圖像使用數組，如“ c.drawImage（images [loaded ++]，dx，dy，100、100”），兩個圖像分別繪制，但是它們的順序是隨機的。

有沒有辦法使用這樣的功能在畫布上繪制圖像？

Answer 1

嘗試更改：

image = new Image();

至：

var image = new Image();

當前，您正在全局范圍內設置“映像”，然后有可能在加載（不會同步發生）之前重寫其onload處理程序。