Warum erscheint mein Bild nicht auf der HTML5-Leinwand, obwohl mein Code korrekt zu sein scheint?

Bild auf HTML5-Leinwand zeichnen

Sie versuchen, ein Bild zu einer Leinwand hinzuzufügen, aber es gelingt Ihnen nicht. Lassen Sie uns das Geheimnis hinter diesem schwer fassbaren Unterfangen lüften.

Ihr Code scheint solide zu sein, das Problem muss also woanders liegen. Der entscheidende Schritt, den Sie verpassen, besteht darin, sicherzustellen, dass das Bild geladen ist, bevor Sie versuchen, es zu zeichnen.

Hier ist eine überarbeitete Lösung:

<code class="html"><canvas id="viewport"></canvas></code>

<code class="css">canvas#viewport { border: 1px solid white; width: 900px; }</code>

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

function make_base() {
  var base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0);
  };
}

make_base();</code>

Durch Hinzufügen eines Onload-Ereignisses Wenn Sie sich das Bild anhören, verzögern Sie die Zeichnung, bis das Bild vollständig geladen ist, und stellen so sicher, dass es auf der Leinwand vorhanden ist.

Das obige ist der detaillierte Inhalt vonWarum erscheint mein Bild nicht auf der HTML5-Leinwand, obwohl mein Code korrekt zu sein scheint?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!