From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- .../api/canvasrenderingcontext2d/linejoin/index.md | 119 +++++++++------------ 1 file changed, 51 insertions(+), 68 deletions(-) (limited to 'files/fr/web/api/canvasrenderingcontext2d/linejoin') diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md index 93b38bb13d..c438190f71 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md @@ -10,50 +10,47 @@ tags: - stroke translation_of: Web/API/CanvasRenderingContext2D/lineJoin --- -
{{APIRef}}
+{{APIRef}} -

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

+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.

+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()")}}.

-
+> **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

+## Syntaxe -
ctx.lineJoin = "bevel" || "round" || "miter";
-
+ ctx.lineJoin = "bevel" || "round" || "miter"; -

Options

+### Options -

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

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

+![](canvas_linejoin.png) -
-
"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.
-
+- `"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

+## Exemples -

Modifier les jointures d'un tracé

+### Modifier les jointures d'un tracé -

Cet exemple applique des jointures arrondies au tracé.

+Cet exemple applique des jointures arrondies au tracé. -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
const canvas = document.getElementById('canvas');
+```js
+const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 
 ctx.lineWidth = 20;
@@ -64,23 +61,26 @@ ctx.lineTo(190, 100);
 ctx.lineTo(280, 20);
 ctx.lineTo(280, 150);
 ctx.stroke();
-
+``` -

Résultat

+#### Résultat -

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

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

Comparaison des jointures de lignes

+### Comparaison des jointures de lignes -

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

+L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de `lineJoin`. - +```html hidden + +``` -
var ctx = document.getElementById('canvas').getContext('2d');
+```js
+var ctx = document.getElementById('canvas').getContext('2d');
 var lineJoin = ['round', 'bevel', 'miter'];
 ctx.lineWidth = 10;
 
-for (let i = 0; i < lineJoin.length; i++) {
+for (let i = 0; i < lineJoin.length; i++) {
   ctx.lineJoin = lineJoin[i];
   ctx.beginPath();
   ctx.moveTo(-5, 5 + i * 40);
@@ -90,44 +90,27 @@ for (let i = 0; i < lineJoin.length; i++) {
   ctx.lineTo(155, 5 + i * 40);
   ctx.stroke();
 }
-
+``` -

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

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

Spécifications

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

Compatibilité des naviagateurs

+## Compatibilité des naviagateurs +{{Compat("api.CanvasRenderingContext2D.lineJoin")}} +### WebKit/Blink-notes particulières -

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

+- Dans les navigateurs basés sur WebKit et Blink, une méthode `ctx.setLineJoin()` non-standard et obsolète est implémentée en plus de cette propriété. - +## Voir aussi - - -

Voir aussi

- - +- L'interface définissant cette propriété: {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.lineCap")}} +- {{domxref("CanvasRenderingContext2D.lineWidth")}} +- [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) -- cgit v1.2.3-54-g00ecf