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

如何解决是否可以在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方法始终使用vars的LAST值，而不是迭代数组时的值。 尝试将X和Y设置为图像对象的属性：

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

并在onload上：

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

this

是引发the4ѭ事件的图像。 编辑我已经更改了用于携带坐标的属性。现在它们是setAtX / Y。您不能使用x和y，因为它们已保留。     ,您在同一点上绘制它们。 drawImage并不关心您给定参数的高度或宽度；它只想要一个图像和一个坐标。参见https://developer.mozilla.org/en/Canvas_tutorial/Using_images 因此，您需要为图片提供更多数据；就像是：

    thisWidth = letters[i][0];
    thisHeight = letters[i][1];
    imgSrc = letters[i][2];
    thisX = letters[i][3]; //<---
    thisY = letters[i][4]; //<---
    letterImg = new Image();
    letterImg.onload = function()
    {
        context.drawImage(letterImg,thisX,thisY,thisWidth,thisHeight);
        //or,just
        context.drawImage(letterImg,thisY);
    }
    letterImg.src = imgSrc;

编辑：刚刚有一个想法-您可以动态地做到这一点：

context.drawImage(letterImg,letters[i-1][0]+thisWidth,letters[i-1]+thisHeight,thisHeight);

通过这种方式，您将不得不检查内容，但是我认为您已掌握了总体意图。     ,您每次必须重新定位绘制开始位置，以免图像被覆盖。

[context . drawImage(image,dx,dy,dw,dh)][1]

链接上有一张图片，说明每个参数的含义。