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

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

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

1 个答案: