Maison > interface Web > Tutoriel H5 > le corps du texte

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

黄舟
Libérer: 2018-05-26 16:09:14
original
7948 Les gens l'ont consulté

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>
Copier après la connexion

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);
Copier après la connexion

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)
Copier après la connexion
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);
Copier après la connexion

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)
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!