Pourquoi mon image n'apparaît-elle pas sur le canevas HTML5 ?

Ajout d'images à un canevas HTML5

L'incorporation d'images dans votre canevas HTML5 peut améliorer sa fonctionnalité et son attrait visuel. Cependant, si votre image n'apparaît pas sur le canevas malgré la définition correcte de la source de l'image et le dessin de l'image, considérez ce qui suit :

Il est essentiel de s'assurer que l'image est complètement chargée avant d'essayer de la dessiner sur le canevas. toile. Si vous dessinez l'image avant qu'elle ne soit prête, elle ne s'affichera pas.

Pour résoudre ce problème et garantir que l'image s'affiche correctement :

1. Utilisez un gestionnaire d'événements onload  : attachez un gestionnaire d'événement onload à l'élément image. Ce gestionnaire sera appelé une fois le chargement de l'image terminé.
2. Dessinez l'image dans le rappel onload : dans le gestionnaire d'événements onload, utilisez la méthode context.drawImage() pour dessiner l'image sur le canevas.

Voici un extrait de code mis à jour qui illustre cette approche :

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

En utilisant le rappel onload, vous vous assurez que l'image est entièrement chargée avant d'être dessinée dessus la toile, résolvant le problème de l'image qui n'apparaît pas.

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!