Почему изображение не отображается при загрузке, а отображается при обновлении?

Question

Я играю с элементом canvas в HTML5 и заметил странное поведение.При начальной загрузке изображение, которое я показываю, не отображается.Однако, когда я обновляю браузер, он отображается соответствующим образом.Я использовал IE9 и Chrome.Оба ведут себя одинаково.Код JavaScript выглядит следующим образом:

window.onload = load;
function load() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.fillRect(0, 0, 640, 400);
    var image = new Image();
    image.src = "Images/smiley.png";
    context.drawImage(image, 50, 50);
}

Прямоугольник рисует правильно оба раза, это смайлик, который отображается только при обновлении браузера.

Я в процессе изучения HTML5JavaScript.Я уверен, что просто делаю что-то глупое, но я не могу понять это.

Answer 1

Изображения загружаются асинхронно, поэтому только после обновления они загружаются достаточно рано, потому что они кэшируются. Обычно он еще не загружен во время звонка drawImage. Используйте onload:

var image = new Image();
image.src = "Images/smiley.png";
image.onload = function() {
    context.drawImage(image, 50, 50);
};

Answer 2

В любом случае, это случилось и со мной (только для IE9 для меня), я нашел простое решение.

Установите фон холста для исходного изображения, которое вы хотите отобразить.

var canvas = document.getElementById("canvas");
canvas.style.background="url('image.png')";

Это должно работать!

Answer 3

На самом деле, даже просто используя image.onload = function() {}, вы все равно можете столкнуться с проблемами.Используйте эту технику (это совсем не то, что я говорю), но переместите ее в конец своей страницы.

Например, у меня есть сайт социальной сети, который использует canvas для отображения фотографии профиля.(URI, сохраненный в БД), и распечатайте его на холсте, затем наложите логотип.снизу перед конечным тегом </body>, но я поднял его выше из-за моей системы шаблонов.По-видимому, это дает времени загрузки изображения после того, как элемент холста был нарисован на экране и готов к приему ввода.

Я не могу полагаться на установку фона холста, и у меня нет желаниябороться с обновлениями.По какой-то причине одного сценария с img.onload = function() {} было недостаточно.Опустите его ниже и избавьте себя от головной боли.