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

【问题标题】：Why can't I use a javascript function to paint more than one image on an html canvas?为什么我不能使用 javascript 函数在 html 画布上绘制多个图像？
【发布时间】：2011-02-16 02:28:21
【问题描述】：

我有一个这样的 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" 并且两个图像分别绘制，但它们的顺序是随机的。

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

【问题讨论】：

您使用的是什么浏览器/版本？也许它的画布元素支持目前是“测试版”？

标签： javascript html canvas

【解决方案1】：

尝试改变：

image = new Image();

到：

var image = new Image();

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

【讨论】：

请注意，您还应该/必须set onload before setting src。
好答案@Ben。是的，没有 var，您正在设置一个全局变量，然后它会被“bar”覆盖。
感谢 Ben 和其他所有人的 cmets。添加 var 修复了错误。是时候进一步了解 javascript 中的作用域了。