Maison > Article > interface Web > Introduction détaillée à la méthode drawImage() du dessin HTML5 Canvas (exemple de code)
Introduction détaillée à la méthode drawImage() du dessin HTML5 Canvas (exemple de code)
- 不言avant
- 2019-03-14 11:28:175773parcourir
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.
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.
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);
|
Vous pourriez être intéressé
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!