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 --- .../api/canvasrenderingcontext2d/rect/index.html | 122 --------------------- .../web/api/canvasrenderingcontext2d/rect/index.md | 122 +++++++++++++++++++++ 2 files changed, 122 insertions(+), 122 deletions(-) delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/rect/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/rect/index.md (limited to 'files/fr/web/api/canvasrenderingcontext2d/rect') diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.html b/files/fr/web/api/canvasrenderingcontext2d/rect/index.html deleted file mode 100644 index 8a822dd115..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/rect/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: CanvasRenderingContext2D.rect() -slug: Web/API/CanvasRenderingContext2D/rect -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode -translation_of: Web/API/CanvasRenderingContext2D/rect ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.rect() de l'API Canvas 2D crée un chemin de rectangle à la position (x, y) et de dimensions width et height. Ces quatre points sont connectés par des lignes droites et le sous-chemin est directement fermé, vous pouvez donc utiliser fill ou stroke pour dessiner ce rectangle.

- -

Syntaxe

- -
void ctx.rect(x, y, width, height);
-
- -

Paramètres

- -
-
x
-
La coordonnée x pour le côté gauche du rectangle.
-
y
-
La coordonnée y pour le haut du rectangle.
-
width
-
La largeur du rectangle.
-
height
-
La hauteur du rectangle.
-
- -

Exemples

- -

Utiliser la méthode rect

- -

Ceci est un simple bout de code qui utilise la méthode rect pour dessiner un chemin. Pour réellement dessiner ce chemin sur le canvas, vous devez utiliser la méthode {{domxref("CanvasRenderingContext2D.fill", "fill()")}} ou {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Voir également les méthodes {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} et {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}, qui peuvent le faire en une seule étape.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-ctx.rect(10, 10, 100, 100);
-ctx.fill();
-
- -

Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement:

- -

Code jouable

- - - - - -

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

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md new file mode 100644 index 0000000000..8a822dd115 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md @@ -0,0 +1,122 @@ +--- +title: CanvasRenderingContext2D.rect() +slug: Web/API/CanvasRenderingContext2D/rect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode +translation_of: Web/API/CanvasRenderingContext2D/rect +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.rect() de l'API Canvas 2D crée un chemin de rectangle à la position (x, y) et de dimensions width et height. Ces quatre points sont connectés par des lignes droites et le sous-chemin est directement fermé, vous pouvez donc utiliser fill ou stroke pour dessiner ce rectangle.

+ +

Syntaxe

+ +
void ctx.rect(x, y, width, height);
+
+ +

Paramètres

+ +
+
x
+
La coordonnée x pour le côté gauche du rectangle.
+
y
+
La coordonnée y pour le haut du rectangle.
+
width
+
La largeur du rectangle.
+
height
+
La hauteur du rectangle.
+
+ +

Exemples

+ +

Utiliser la méthode rect

+ +

Ceci est un simple bout de code qui utilise la méthode rect pour dessiner un chemin. Pour réellement dessiner ce chemin sur le canvas, vous devez utiliser la méthode {{domxref("CanvasRenderingContext2D.fill", "fill()")}} ou {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Voir également les méthodes {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} et {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}, qui peuvent le faire en une seule étape.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+ +

Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement:

+ +

Code jouable

+ + + + + +

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

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

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