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/linejoin/index.html | 133 --------------------- .../api/canvasrenderingcontext2d/linejoin/index.md | 133 +++++++++++++++++++++ 2 files changed, 133 insertions(+), 133 deletions(-) delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md (limited to 'files/fr/web/api/canvasrenderingcontext2d/linejoin') diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html deleted file mode 100644 index 93b38bb13d..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: CanvasRenderingContext2D.lineJoin -slug: Web/API/CanvasRenderingContext2D/lineJoin -tags: - - API - - Canvas - - Propriété - - arrondit - - coin - - stroke -translation_of: Web/API/CanvasRenderingContext2D/lineJoin ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.lineJoin de l'API Canvas 2D détermine la forme à utiliser pour joindre deux segments de ligne à leur intersection.

- -

Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés.

- -
-

Note: Les lignes peuvent être dessinées aves les méthodes  {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.

-
- -

Syntaxe

- -
ctx.lineJoin = "bevel" || "round" || "miter";
-
- -

Options

- -

Il y a trois valeurs possibles pour cette propriété: "round", "bevel" et "miter". Celle par défaut est "miter".

- -

- -
-
"round" (rond)
-
Arrondit les coins d'une forme en remplissant un zone supplémentaire centré sur le point final commun des segments connectés. Le rayon de ces coins arrondis est égal à la largeur de la ligne .
-
"bevel" (biseau)
-
Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés.
-
"miter" (onglet)
-
Les segments raccordés  sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut.
-
- -

Exemples

- -

Modifier les jointures d'un tracé

- -

Cet exemple applique des jointures arrondies au tracé.

- -

HTML

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

JavaScript

- -
const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-
-ctx.lineWidth = 20;
-ctx.lineJoin = 'round';
-ctx.beginPath();
-ctx.moveTo(20, 20);
-ctx.lineTo(190, 100);
-ctx.lineTo(280, 20);
-ctx.lineTo(280, 150);
-ctx.stroke();
-
- -

Résultat

- -

{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}

- -

Comparaison des jointures de lignes

- -

L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de lineJoin.

- - - -
var ctx = document.getElementById('canvas').getContext('2d');
-var lineJoin = ['round', 'bevel', 'miter'];
-ctx.lineWidth = 10;
-
-for (let i = 0; i < lineJoin.length; i++) {
-  ctx.lineJoin = lineJoin[i];
-  ctx.beginPath();
-  ctx.moveTo(-5, 5 + i * 40);
-  ctx.lineTo(35, 45 + i * 40);
-  ctx.lineTo(75, 5 + i * 40);
-  ctx.lineTo(115, 45 + i * 40);
-  ctx.lineTo(155, 5 + i * 40);
-  ctx.stroke();
-}
-
- -

{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "canvas_linejoin.png")}}

- -

Spécifications

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

Compatibilité des naviagateurs

- - - -

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

- - - - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md new file mode 100644 index 0000000000..93b38bb13d --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md @@ -0,0 +1,133 @@ +--- +title: CanvasRenderingContext2D.lineJoin +slug: Web/API/CanvasRenderingContext2D/lineJoin +tags: + - API + - Canvas + - Propriété + - arrondit + - coin + - stroke +translation_of: Web/API/CanvasRenderingContext2D/lineJoin +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.lineJoin de l'API Canvas 2D détermine la forme à utiliser pour joindre deux segments de ligne à leur intersection.

+ +

Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés.

+ +
+

Note: Les lignes peuvent être dessinées aves les méthodes  {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.

+
+ +

Syntaxe

+ +
ctx.lineJoin = "bevel" || "round" || "miter";
+
+ +

Options

+ +

Il y a trois valeurs possibles pour cette propriété: "round", "bevel" et "miter". Celle par défaut est "miter".

+ +

+ +
+
"round" (rond)
+
Arrondit les coins d'une forme en remplissant un zone supplémentaire centré sur le point final commun des segments connectés. Le rayon de ces coins arrondis est égal à la largeur de la ligne .
+
"bevel" (biseau)
+
Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés.
+
"miter" (onglet)
+
Les segments raccordés  sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut.
+
+ +

Exemples

+ +

Modifier les jointures d'un tracé

+ +

Cet exemple applique des jointures arrondies au tracé.

+ +

HTML

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

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.lineWidth = 20;
+ctx.lineJoin = 'round';
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(190, 100);
+ctx.lineTo(280, 20);
+ctx.lineTo(280, 150);
+ctx.stroke();
+
+ +

Résultat

+ +

{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}

+ +

Comparaison des jointures de lignes

+ +

L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de lineJoin.

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+var lineJoin = ['round', 'bevel', 'miter'];
+ctx.lineWidth = 10;
+
+for (let i = 0; i < lineJoin.length; i++) {
+  ctx.lineJoin = lineJoin[i];
+  ctx.beginPath();
+  ctx.moveTo(-5, 5 + i * 40);
+  ctx.lineTo(35, 45 + i * 40);
+  ctx.lineTo(75, 5 + i * 40);
+  ctx.lineTo(115, 45 + i * 40);
+  ctx.lineTo(155, 5 + i * 40);
+  ctx.stroke();
+}
+
+ +

{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "canvas_linejoin.png")}}

+ +

Spécifications

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

Compatibilité des naviagateurs

+ + + +

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

+ + + + + +

Voir aussi

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