Warum zeichnet mein Leinwandbild nicht? Die Bedeutung des asynchronen Ladens von Bildern.

Vor dem Zeichnen auf das Laden des Bildes warten

Wenn Sie versuchen, ein Bild zu einer Leinwand hinzuzufügen, ist es wichtig sicherzustellen, dass das Bild vorher geladen wird versuche es zu zeichnen. Das Problem, auf das Sie in Ihrem Code gestoßen sind, ist auf die asynchrone Natur des Bildladens zurückzuführen.

Um dieses Problem zu beheben, müssen Sie dem Onload-Ereignis des Bildes eine Rückruffunktion hinzufügen. Diese Rückruffunktion wird ausgeführt, wenn das Bild vollständig geladen ist, um sicherzustellen, dass die Bilddaten verfügbar sind, bevor Sie versuchen, es zu zeichnen.

Der unten korrigierte Code wartet, bis das Bild geladen ist, bevor er es auf die Leinwand zeichnet :

<code class="js">var canvas = document.getElementById('viewport'),
    context = canvas.getContext('2d');

make_base();

function make_base() {
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function() {
    context.drawImage(base_image, 100, 100);
  };
}</code>

Das obige ist der detaillierte Inhalt vonWarum zeichnet mein Leinwandbild nicht? Die Bedeutung des asynchronen Ladens von Bildern.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!