HTML5 Dessin d'image sur le canvas

HTML5 Le canvas utilise drawImage() pour dessiner des images. Avant de dessiner une image sur le canvas, il est nécessaire de créer un objet Image et de charger l'image en mémoire.

HTML5Le canvas dispose des options pour dessiner des images. Vous pouvez utiliser drawImage()2Les différentes fonctions de l'objet contexte 2D peuvent être utilisées pour effectuer cette opération. Il y a trois fonctions différentes drawImage() :

drawImage(image, dx, dy);
drawImage(image, dx, dy, dw, dh);
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

Le premier paramètre image est l'image à dessiner. Nous expliquerons plus tard dans cet article comment créer et charger une image.
Dans les paramètres dx et dy, ce sont les abréviations de 'destinationX' et 'destinationY'. Ces paramètres déterminent la position de l'image dessinée sur le canevas.
Dans les paramètres dw et dh, ce sont les abréviations de 'destinationWidth' et 'destinationHeight'. Ces paramètres déterminent la taille de l'image lors du dessin.
Dans les paramètres sx et sy, ce sont les abréviations de 'sourceX' et 'sourceY'. Ces paramètres déterminent à partir de quel point de l'image source commencer à copier le rectangle sur le canevas.
Dans les paramètres sw et sh, ce sont les abréviations de 'sourceWidth' et 'sourceHeight'.

Création et chargement de l'image

Avant de dessiner une image sur le canevas, il est nécessaire de créer un objet Image et de charger l'image en mémoire. C'est une méthode réalisée en JavaScript:

var image = new Image();
image.src = "https://fr.oldtoolbag.com/en/run/html/canvas-shot.png";

Il est nécessaire de charger complètement l'image avant de pouvoir dessiner l'image. Pour déterminer si l'image est complètement chargée, ajoutez un écouteur d'événement à l'image. Cet écouteur d'événement est appelé lors du chargement de l'image. Voici à quoi cela ressemble:

image.addEventListener("39; load39; drawImage1);

drawImage1Les paramètres sont les fonctions appelées lors du déclenchement d'un événement.
Voici un exemple de code complet, capable de créer, charger et dessiner une image sur le canevas:

window.onload = function() {
　　　　drawEx1();
}
var image1　= null;
function drawEx1() {
　　　　image1　= new Image();
　　　　image1.src =
　　　　　　　　"https://fr.oldtoolbag.com/en/run/html/canvas-shot.png";
　　　　image1.addEventListener("39; load39; drawImage1);
}
function drawImage1() {
　　　　var canvas = document.getElementById("ex1");
　　　　var context = canvas.getContext("2d");
　　　　context.drawImage(image1,　10,　10);
}

Voici le résultat du code ci-dessus lors du dessin sur le canevas:

HTML5 Canvas non pris en charge

redimensionner l'image

Comme mentionné au début de cet article, vous pouvez redimensionner l'image pendant le dessin de l'image. Voici un exemple de code qui dessine une image et la redimensionne à2width: 0010height: 0 pixels

var width =　200;
var height =　100;
context.drawImage(image2,　10,　10, width, height);

Voici l'apparence de l'image lors du dessin sur le canevas, avec une largeur et une hauteur redimensionnées :

HTML5 Canvas non pris en charge

Dessiner une partie de l'image

Il est possible de dessiner une partie de l'image sur le canevas. La partie dessinée est un rectangle copié à partir de l'image. Voici un exemple de code :

var dx =　10;
var dy =　10;
var dw =　75;
var dh =　75;
var sx =　20;
var sy =　20;
var sw =　75;
var sh =　75;
context.drawImage(image3, sx, sy, sw, sh, dx, dy, dw, dh);

Les paramètres sont sx, sy, sw et sh (déclarer sx, sy le début du rectangle) image, et la largeur (sw) et la hauteur (sh) du rectangle.

Voici l'apparence de la boîte rectangulaire de l'image lors du dessin sur le canevas :

HTML5 Canvas non pris en charge