Introduction détaillée à la méthode drawImage() du dessin HTML5 Canvas (exemple de code)-Tutoriel H5-php.cn

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

不言

Libérer： 2019-03-14 11:28:17

avant

5845 Les gens l'ont consulté

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.

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

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);

Copier après la connexion

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);

Copier après la connexion

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);

Copier après la connexion

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

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.

l'image peut simplement être dessinée sur la toile
à sa taille d'origine.

4. 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 : Introduction détaillée à la méthode drawImage() du dessin HTML5 Canvas (exemple de code) 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);

Copier après la connexion

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);

Copier après la connexion

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);

Copier après la connexion