Explication détaillée d'exemples sur la façon d'insérer des images dans le canevas en HTML5

chargement du canevas...

L'affichage des images dans le canevas est très simple. Vous pouvez ajouter un tampon à l'image, étirer l'image ou modifier l'image via le calque de correction, et l'image deviendra généralement le point central de la toile. Vous pouvez facilement ajouter du contenu d'image au canevas avec quelques commandes simples intégrées à l'API HTML5 Canvas.

Cependant, les images augmentent la complexité des opérations sur le canevas : vous devez attendre que l'image soit complètement chargée avant de pouvoir l'utiliser. Les navigateurs chargent généralement les images de manière asynchrone pendant l'exécution des scripts de page. Si vous essayez de restituer l'image sur le canevas avant qu'elle ne soit complètement chargée, le canevas n'affichera aucune image. Par conséquent, les développeurs doivent accorder une attention particulière à ce que l’image ait été chargée avant le rendu.

Pour garantir que l'image est entièrement chargée avant le rendu, nous fournissons un rappel, c'est-à-dire que le code suivant ne sera exécuté que lorsque l'image est chargée, comme indiqué dans la liste de codes ci-dessous.

<script type="text/javascript">
function drawBeauty(beauty){
var mycv = document.getElementById("cv");  
var myctx = mycv.getContext("2d");
myctx.drawImage(beauty, 0, 0);
}
function load(){
var beauty = new Image();  
beauty.src = "http://images.cnblogs.com/cnblogs_com/html5test/359114/r_test.jpg"; 
if(beauty.complete){
   drawBeauty(beauty);
}else{
   beauty.onload = function(){
     drawBeauty(beauty);
   };
   beauty.onerror = function(){
     window.alert(&#39;美女加载失败，请重试&#39;);
   };
};   
}//load
if (document.all) {
  window.attachEvent(&#39;onload&#39;, load);  
  }else {  
  window.addEventListener(&#39;load&#39;, load, false);
  }
</script>

Dessin de base

Dans l'opération de dessin la plus élémentaire, tout ce dont vous avez besoin est la position (coordonnées x et y) où vous souhaitez que l'image apparaisse. La position de l'image est jugée par rapport à son coin supérieur gauche. Grâce à cette méthode, l’image peut simplement être peinte sur la toile dans sa taille originale.

drawImage(image, x, y)
var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(’2d’);
ctx.drawImage(myImage, 50, 50);
ctx.drawImage(myImage, 125, 125);
ctx.drawImage(myImage, 210, 210);

Mettre à l'échelle et redimensionner

Pour modifier la taille d'une image, vous devez utiliser la fonction drawImage surchargée et lui fournir les paramètres de largeur et de hauteur souhaités.

drawImage(image, x, y, width, height)

var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage, 50, 50, 100, 100);
ctx.drawImage(myImage, 125, 125, 200, 50);
ctx.drawImage(myImage, 210, 210, 500, 500);

Recadrage d'image

La fonction de la dernière méthode drawImage est de recadrer l'image.

drawImage(image,
sourceX,
sourceY,
sourceWidth,
sourceHeight,
destX,
destY,
destWidth,
destHeight)

Il existe de nombreux paramètres, mais en gros, vous pouvez considérer cela comme prenant une zone rectangulaire de l'image originale et la dessinant dans la zone cible sur la toile.

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!