Слоистость текста и изображений в Canvas HTML5

Question

Привет, я делаю небольшую демонстрацию холста HTML5.

Я инициировал холст с помощью модернизатора из текста HTML5 О'Рейли.

Это для iPad, поэтому мой холст 1024 на 768.

Затем я загружаю фоновое изображение в своей функции DrawScreen.

var backgroundImage = new Image();
backgroundImage.src = "images/background.jpg";
backgroundImage.onload = function(){
    context.drawImage(backgroundImage,0,0);
}

Я хочу добавить к этому текст.Поэтому я делаю:

function drawText(){
    context.fillStyle ="gray";
    context.font = "28px Helvetica";        
    context.fillText(message, 260, 700);
}

Затем я вызываю обе функции:

    DrawScreen();
    DrawText();

Однако мое фоновое изображение полностью перезаписывает мой текст.Или на вершине этого.Если я отключу DrawScreen ();Я могу видеть текст.Изменение порядка функций не имеет значения ...

Как это сделать?Я чувствую себя настолько глупо, что застрял на чем-то, что кажется таким элементарным.

Спасибо

Answer 1

Проблема в том, что ваше изображение рисуется после вашего текста и, следовательно, поверх него.Это из-за времени, которое требуется для загрузки изображения.По сути, происходит следующее:

• Вы вызываете функцию DrawScreen
• . Вы начинаете загружать фоновое изображение, назначая атрибут src
• . Вы назначаете функцию onload ().обработчик для запуска после завершения загрузки изображения.
• DrawScreen завершает работу, выполнив всю свою работу
• Вы вызываете DrawText, который немедленно рисует текст
• Через некоторое время,изображение завершает загрузку, запускает событие onload (), и вы рисуете фоновое изображение.

Я бы предложил реструктурировать ваш код так, чтобы all рисунок был запущенуспешная загрузка изображения.Таким образом, ничего не будет происходить асинхронно, и будет нарисовано изображение, за которым следует текст.

Вот краткий пример на jsFiddle .