是否可以在 HTML5 画布中使用多个图像？

我正在尝试将 10 张不同的图像加载到画布中。我的计划是最终将这些图像制作成动画，但现在它们似乎正在互相覆盖。这是我的代码：

var DrawLetters = function()
{
    for (i = 0; i < howManyLetters; i++)
    {
        thisWidth = letters[i][0];
        thisHeight = letters[i][1];
        imgSrc = letters[i][2];
        letterImg = new Image();
        letterImg.onload = function()
        {
            context.drawImage(letterImg,thisWidth,thisHeight);
        }
        letterImg.src = imgSrc;
    }
};

letters 是一个包含 10 个元素的数组，其中每个元素都包含图像的路径。对此的任何帮助将不胜感激。

我已经尝试过您的代码，并且 onload 方法始终使用变量的最后一个值，而不是迭代数组时的值。

尝试将 X 和 Y 设置为图像对象的属性：

// I assume you are storing the coordinates where the letters must be
letterImg.setAtX = letter[i][XPOS];
letterImg.setAtY = letter[i][YPOS];

并在加载时：

context.drawImage(this, this.setAtX, this.setAtY);

this图像提升了onload event.

Edit我已经更改了用于携带坐标的属性。现在它们已设置AtX/Y。您不能使用 x 和 y，因为它们是保留的。