Pourquoi mon image sur toile ne s'affiche-t-elle pas ? L'importance du chargement d'images asynchrone.

Attendre le chargement de l'image avant de dessiner

Lorsque vous essayez d'ajouter une image à un canevas, il est crucial de vous assurer que l'image est chargée avant essayer de le dessiner. Le problème que vous avez rencontré dans votre code est dû à la nature asynchrone du chargement de l'image.

Pour résoudre ce problème, vous devez ajouter une fonction de rappel à l'événement onload de l'image. Cette fonction de rappel sera exécutée une fois le chargement de l'image terminé, garantissant que les données de l'image sont disponibles avant d'essayer de la dessiner.

Le code corrigé ci-dessous attendra que l'image se charge avant de la dessiner sur le canevas. :

<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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!