Можно ли использовать несколько изображений на холсте HTML5?

Question

Я пытаюсь загрузить 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 элементов, где каждый элемент содержит путь к изображению. Любая помощь по этому вопросу будет принята с благодарностью.

Answer 1

Я пробовал ваш код, и метод onload всегда использует значение 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];

и при нагрузке:

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

this - изображение, вызывающее событие onload.

Редактировать Я изменил свойства, используемые для переноса координат. Теперь они настроены на ATX / Y. Вы не можете использовать x и y, потому что они зарезервированы.

Answer 2

Вы рисуете их в одной точке.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, thisX, thisY);
    }
    letterImg.src = imgSrc;

Редактировать: Просто подумал - вы можете сделать это с диагональю:

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

Таким образом, вам придется проверять вещи, но я думаю, что выполучить общее намерение.

Answer 3

Вы должны каждый раз менять положение начальной точки рисования, чтобы изображения не перезаписывались.

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

В ссылке есть изображение, объясняющее, что означает каждый параметр.