From c05efa8d7ae464235cf83d7c0956e42dc6974103 Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:14 +0200 Subject: move *.html to *.md --- .../canvasrenderingcontext2d/drawimage/index.md | 167 +++++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md (limited to 'files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md') diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md new file mode 100644 index 0000000000..92bc5a9b9d --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md @@ -0,0 +1,167 @@ +--- +title: CanvasRenderingContext2D.drawImage() +slug: Web/API/CanvasRenderingContext2D/drawImage +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Référence(2) +translation_of: Web/API/CanvasRenderingContext2D/drawImage +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.drawImage() de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas.

+ +

Syntaxe

+ +
void ctx.drawImage(image, dx, dy);
+void ctx.drawImage(image, dx, dy, dLargeur, dHauteur);
+void ctx.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur);
+
+ +

drawImage

+ +

Paramètres

+ +
+
image
+
Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}.
+
dx
+
La coordonnée x dans le canvas de destination où placer le coin supérieur gauche de l'image source.
+
dy
+
La coordonnée y dans le canvas de destination où placer le coin supérieur gauche de l'image source.
+
dLargeur
+
La largeur de l'image dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale.
+
dHauteur
+
La hauteur de l'image dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale.
+
sx
+
La coordonnée x du bord en haut à gauche de la partie de l'image source à dessiner dans le contexte du canvas.
+
sy
+
La coordonnée y du bord en haut à gauche de la partie de l'image source à dessiner dans le contexte du canvas.
+
sLargeur
+
La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins sx, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (sx ; sy) et jusqu'au bord en bas à droite.
+
sHauteur
+
La hauteur de la partie de l'image source à dessiner dans le contexte. De la même manière que pour sLargeur, si aucune valeur n'est donnée cet argument prendra la valeur de la hauteur de l'image moins sy.
+
+ +

Exceptions

+ +
+
INDEX_SIZE_ERR
+
Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins.
+
INVALID_STATE_ERR
+
L'image reçue n'en est pas une.
+
TYPE_MISMATCH_ERR
+
L'image reçue n'est pas supportée.
+
+ +

Exemples

+ +

Utiliser la méthode drawImage

+ +

Ceci est un extrait de code utilisant la méthode drawImage :

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+  <img id="source" src="rhino.jpg"
+       width="300" height="227">
+</div>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById("source");
+
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
+
+ +

Éditez le code suivant pour voir les changements en direct dans la balise canvas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.drawImage")}}

+ +

Notes concernant la compatibilité

+ + + +

Notes

+ + + +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf