Introduction détaillée à la méthode drawImage() du dessin HTML5 Canvas (exemple de code)

Cet article vous apporte une introduction détaillée (exemple de code) sur la méthode drawImage() du dessin HTML5 Canvas. Il a une certaine valeur de référence. J'espère que cela vous sera utile.

est un nouvel élément HTML qui peut être utilisé par le langage de script (généralement JavaScript) pour dessiner des graphiques. Par exemple, vous pouvez l'utiliser pour dessiner des images, des images composites ou réaliser des animations simples (et pas si simples).

1. La méthode la plus courante pour dessiner sur toile consiste à utiliser l'objet Image. Les formats d'image source pris en charge dépendent de la prise en charge du navigateur. Cependant, certains formats d'image typiques (png, jpg, gif, etc.) ne posent pratiquement aucun problème.
2. Dans tous les exemples ci-dessous, la source de l'image utilisera cette image de taille 200×200.

3. Dessinez une image : 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 dessinée sur la toile à sa taille d'origine.
4. Le code est le suivant :

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50);

5. Transformation d'image : Pour modifier la taille de l'image, vous devez utiliser la fonction drawImage surchargée et lui fournir la largeur et la hauteur souhaitées. paramètres.
6. Le code est le suivant :

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50,100,100);

7. Recadrage de l'image : La fonction de la méthode drawImage est de recadrer l'image. drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight)
8 Il existe de nombreux paramètres, mais fondamentalement, vous pouvez le considérer comme prenant une zone rectangulaire de l'image d'origine et la dessiner. la zone cible sur la toile.
9. Le code est le suivant :
var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,0,0,50,50,25,25,100,100);

cxt.drawImage(img,125,125,100,100,125,125,150,150);

10. Ce sont les balises canvas (canvas) en HTML5 pour le dessin et traitement des images.

1. Colonne
2. Détails de l'article

                                                                                            

Feuilles d'érable rouges                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Publié il y a 52 minutes                                                                                                                                                                                                      16 fois lu                                                              La lecture prend 5 minutes                                                                                                                                                                              

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        

Introduction est un nouvel élément HTML qui peut être utilisé par le langage de script (généralement JavaScript) pour dessiner des graphiques. Par exemple, vous pouvez l'utiliser pour dessiner des images, des images composites ou réaliser des animations simples (et pas si simples). 1. La méthode la plus courante pour dessiner sur toile consiste à utiliser l'objet Image. Les formats d'image source pris en charge dépendent de la prise en charge du navigateur. Cependant, certains formats d'image typiques (png, jpg, gif, etc.) ne posent pratiquement aucun problème. 2. Dans tous les exemples ci-dessous, la source de l'image utilisera cette image de taille 200×200.

3. Dessinez une image : 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 dessinée sur la toile
à sa taille d'origine.

4. Le code est le suivant :

5. Transformation d'image : Pour modifier la taille de l'image, vous devez utiliser la fonction drawImage surchargée et lui fournir la largeur et la hauteur souhaitées. paramètres.
6. Le code est le suivant :

7. Recadrage de l'image : La fonction de la méthode drawImage est de recadrer l'image. drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight)
8 Il existe de nombreux paramètres, mais fondamentalement, vous pouvez le considérer comme prenant une zone rectangulaire de l'image d'origine et la dessiner. la zone cible sur la toile. 9. Le code est le suivant : var myImage=document.getElementByIdx_x("myCanvas");

10. Ce sont les balises canvas (canvas) en HTML5 pour le dessin et traitement des images.

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50);

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50,100,100);

Rapport

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,0,0,50,50,25,25,100,100);

cxt.drawImage(img,125,125,100,100,125,125,150,150);

• 
• J'aime
  • 🎜>0

Collection

|

0

Vous pourriez être intéressé Commentaires                                                                                                              

Tri par défaut Trier par heure

Chargement...

Afficher plus de commentaires

Poster un commentaire

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!