Использование drawImage в HTML5

Question

Факт: Действует следующий код.

var img = new Image(); 
img.onload = function() { 
    context.drawImage(img, 32, 32); 
}; 
img.src = "example.png"; 

Первое наблюдение: следующее изображение на холст не будет показано.

var img = new Image(); 
img.src = "example.png"; 
context.drawImage(img, 32, 32); 

Второе замечание: следующее будет притягивать к холсту (в конце концов) ...

var img = new Image(); 
img.src = "example.png"; 
setInterval(function() {context.drawImage(img, 32, 32);}, 1000); 

---

Почему мне нужно вызвать функцию DrawImage на обратный вызов? И если это так, почему он в конечном итоге работает, когда он вложен в функцию setInterval?

Answer 1

Когда вы устанавливаете src объекта изображения, браузер начинает его загружать. Но вы можете или не можете загрузить этот образ к моменту, когда браузер выполнит следующую строку кода. Вот почему вы рисуете «пустую» картинку, потому что она еще не загружена.

Вам необходимо разместить обработчик onload, чтобы узнать, когда изображение закончит загрузку. Только тогда вы рисуете его на холст:

var img = new Image();    //create image object 
img.onload = function(){   //create our handler 
    context.drawImage(img, 32, 32); //when image finishes loading, draw it 
} 
img.src = "example.png";   //load 'em up! 

Answer 2

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

Answer 3

Вы можете рисовать только изображение на холсте после его загрузки, поэтому оно работает, когда вы делаете это из обратного вызова onload. И он работает с setInterval, потому что через определенное время он становится полностью загруженным.

Answer 4

Это необходимо, так как браузеру необходимо «прочитать» и в конечном итоге загрузить изображение (событие onload), чтобы правильно обрабатывать загрузку изображения. Использование setInterval, чтобы смоделировать такое поведение не может работать, например, загрузка большого изображения на медленном соединении ... Так что лучший способ сделать это:

var img = new Image(): 
img.src = "image.jpeg"; 
img.onload = function() { 
    // Now you can play with your image. 
}