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

Comment ajouter une image à un canevas

Dans un canevas HTML, vous pouvez améliorer vos créations en incorporant des images. Cependant, rencontrer des difficultés en essayant d’y parvenir peut être frustrant. Cet article vise à vous guider tout au long du processus, en discutant d'un problème courant et en proposant une solution.

Problème : Malgré une source d'image existante et aucune erreur JavaScript, l'image ne s'affiche pas sur la toile.

Solution : Il est crucial de s'assurer que l'image est complètement chargée avant d'essayer de la dessiner sur la toile. Modifiez votre code pour inclure l'écouteur d'événement onload à l'image, comme indiqué ci-dessous :

<code class="javascript">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 incorporant ce simple ajustement, votre image apparaîtra désormais avec succès sur le canevas une fois chargée, vous permettant de améliorez vos créations avec des éléments visuels.

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!