Notes d'étude préliminaires de Html5 Canvas (12) - Recadrage et ajustement de l'image

L'article précédent parlait des deux opérations d'images, la lecture et l'exportation. Après avoir lu l'image, nous utilisons drawImage avec seulement trois paramètres. >5 paramètres, et 9 paramètres de drawImage, en fait La dernière fonction est très similaire à drawRegion dans j2me. Tout d’abord, introduisez la fonction 5 drawImage qui permet d’ajuster la taille de l’image. Regardez d'abord l'effet suivant :

Le code est le suivant suit :

Dans la fonction

onload

var image = new Image();
image.src = "grossini.png";
image.onload = function(){
context.drawImage(image,50,50);
context.drawImage(image,100,50,image.width * 1.5,image.height * 1.5);
context.drawImage(image,200,50,image.width * 0.5,image.height * 0.5);
context.drawImage(image,250,50,160,50);
}

de l'image, j'ai écrit quatre

drawImage, dont les trois dernières sont 5 paramètres, l'effet est très évident, l'un agrandit l'image 1,5 fois, et l'autre réduit l'image à 0,5, et il existe également une mise à l'échelle non uniforme. En d'autres termes, les deux derniers paramètres sont la largeur et la hauteur de l'image que nous voulons dessiner. Bien sûr, dans des circonstances normales, il s'agit simplement d'une mise à l'échelle proportionnelle. Vous pouvez également spécifier d'autres largeurs, comme l'effet de la dernière phrase. Ce qui suit est une introduction à la fonction drawImage

qui peut être coupée. Tout d'abord, regardons l'introduction des paramètres :

. drawImage (image, image Les coordonnées

x

de départ du recadrage dans l'image, les coordonnées y de départ du recadrage dans l'image image, la largeur de la zone de recadrage, la hauteur de la zone de recadrage, donc Position du dessin coordonnées x, position dessinée coordonnées y , largeur de la figure dessinée, hauteur de la figure dessinée) Premier regard sur l'effet suivant :

Le code est le suivant :

Cette fonction a une fonction de recadrage supplémentaire par rapport à la précédente, ce qui nous permet de recadrer arbitrairement les images. Elle est souvent utilisée de cette manière. L'effet est le suivant :

var image = new Image();
image.src = "grossini.png";
image.onload = function(){
context.drawImage(image,50,50);
context.drawImage(image,0,0,image.width,image.height / 3,100,50,image.width * 1.5,image.height * 0.5);
context.drawImage(image,0,image.height / 3,image.width,image.height * 2/ 3,180,50,image.width * 1.5,image.height);

Le code est le suivant :

Cet exemple montre que le recadrage de petites images simples à partir d’une liste de grandes images est l’une des utilisations du recadrage.

Ce qui précède est le contenu des notes d'étude préliminaires de Html5 Canvas (12) - Découpe et ajustement d'image Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

var test = new Image();
test.src = "test.png";
test.onload = function(){
context.drawImage(test,50,180);
context.drawImage(test,67 * 3,0,67,121,50,280,67,121);
}