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

#javascript #image #html #canvas

#javascript #изображение #HTML #холст

Вопрос:

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

1. Вы понимаете, что используете глобальные переменные внутри вашего цикла for?

2. Я делаю. На данный момент это просто подтверждение концепции и не предназначено для прохождения анализа JSLint. Я просто хотел заставить части функционировать, чтобы доказать, что я могу делать то, что я пытался сделать, прежде чем писать это в полном масштабе.

Ответ №1:

Я пробовал ваш код, и метод onload всегда использует ПОСЛЕДНЕЕ значение переменных, а не значение, когда массив был повторен.

Попробуйте задать X и Y для свойств объекта image:

 // 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 событие.

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

Ответ №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;

Редактировать: Просто пришла мысль — вы можете сделать это dymagically:

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

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

Ответ №3:

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

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

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