From 756622ae6fed188f7599a678431f938f8d2e28e0 Mon Sep 17 00:00:00 2001 From: meowmeowmeowcat Date: Fri, 6 Aug 2021 13:35:55 +0800 Subject: Fix broken live samples (#1917) * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fixes sample and updates vs en-US Co-authored-by: julieng --- .../beziercurveto/index.html | 154 +++++++++------------ 1 file changed, 66 insertions(+), 88 deletions(-) (limited to 'files/fr') diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html index 392c7360e1..1bea09a84e 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html @@ -1,147 +1,125 @@ --- title: CanvasRenderingContext2D.bezierCurveTo() slug: Web/API/CanvasRenderingContext2D/bezierCurveTo -tags: - - 2D - - API - - Bézier - - Canevas - - Canvas - - CanvasRenderingContext2D - - Courbe - - Courbe cubique - - Courbe cubique de Bézier - - Courbe de Bézier - - Méthode - - contexte translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo +browser-compat: api.CanvasRenderingContext2D.bezierCurveTo ---
{{APIRef}}
-

La méthode CanvasRenderingContext2D.bezierCurveTo() de l'API Canvas 2D ajoute une courbe de Bézier cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer une courbe de Bézier.

+

La méthode CanvasRenderingContext2D.bezierCurveTo() de l'API Canvas 2D ajoute une courbe de Bézier cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode moveTo() avant de créer une courbe de Bézier.

Syntaxe

-
void contexte2D.bezierCurveTo(pointContrôle1X, pointContrôle1Y, pointContrôle2X, pointContrôle2Y, pointArrivéeX, pointArrivéeY);
+
void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
 

 
 
Paramètres

 
 

- 
pointContrôle1X

- 
La coordonnée en x du premier point de contrôle.

- 
pointContrôle1Y

- 
La coordonnée en y du premier point de contrôle.

- 
pointContrôle2X

- 
La coordonnée en x du second point de contrôle.

- 
pointContrôle2Y

- 
La coordonnée en y du second point de contrôle.

- 
pointArrivéeX

- 
La coordonnée en x du point d'arrivée.

- 
pointArrivéeY

- 
La coordonnée en y du point d'arrivée.

+ 
cp1x

+ 
L'abscisse du premier point de contrôle.

+ 
cp1y

+ 
L'ordonnée du premier point de contrôle.

+ 
cp2x

+ 
L'abscisse du second point de contrôle.

+ 
cp2y

+ 
L'ordonnée du second point de contrôle.

+ 
x

+ 
L'abscisse du point d'arrivée.

+ 
y

+ 
L'ordonnée du point d'arrivée.

 

 
 
Exemples

 
-
Comment bezierCurveTo fonctionne

+
Fonctionnement de bezierCurveTo()

 
 
Cet exemple montre comment une courbe cubique de Bézier est dessinée.

 
 
HTML

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

 
 
JavaScript

 
-
// Définit le canevas et son contexte 2D
-const canevas = document.getElementById("canvas");
-const contexte2D = canevas.getContext("2d");
+
+// Define canvas and context
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
 
 // Define the points as {x, y}
-let pDépart    = { x: 50,  y: 20  };
-let pContrôle1 = { x: 230, y: 30  };
-let pContrôle2 = { x: 150, y: 80  };
-let pArrivée   = { x: 250, y: 100 };
-
-// Courbe cubique de Bézier
-contexte2D.beginPath();
-contexte2D.moveTo(start.x, start.y);
-contexte2D.bezierCurveTo(pContrôle1.x, pContrôle1.y, pContrôle2.x, pContrôle2.y, pArrivée.x, pArrivée.y);
-contexte2D.stroke();
-
-// Points de départ et d'arrivée
-contexte2D.fillStyle = 'blue';
-contexte2D.beginPath();
-contexte2D.arc(pDépart.x, pDépart.y, 5, 0, 2 * Math.PI);   // Point de départ
-contexte2D.arc(pArrivée.x, pArrivée.y, 5, 0, 2 * Math.PI); // Point d'arrivée
-contexte2D.fill();
-
-// Points de contrôle
-contexte2D.fillStyle = 'red';
-contexte2D.beginPath();
-contexte2D.arc(pContrôle1.x, pContrôle1.y, 5, 0, 2 * Math.PI);  // Point de contrôle 1
-contexte2D.arc(pContrôle2.x, pContrôle2.y, 5, 0, 2 * Math.PI);  // Point de contrôle 2
-contexte2D.fill();

+let debut = { x: 50,    y: 20  };
+let cp1 =   { x: 230,   y: 30  };
+let cp2 =   { x: 150,   y: 80  };
+let fin =   { x: 250,   y: 100 };
+
+// Courbe de Bézier cubique
+ctx.beginPath();
+ctx.moveTo(debut.x, debut.y);
+ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, fin.x, fin.y);
+ctx.stroke();
+
+// Points de début et d'arrivée
+ctx.fillStyle = 'blue';
+ctx.beginPath();
+ctx.arc(debut.x, debut.y, 5, 0, 2 * Math.PI);  // Début
+ctx.arc(fin.x, fin.y, 5, 0, 2 * Math.PI);      // Fin
+ctx.fill();
+
+// Points de contrôles
+ctx.fillStyle = 'red';
+ctx.beginPath();
+ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Point de contrôle n°1
+ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Point de contrôle n°2
+ctx.fill();
+

 
 
Résultat

 
-
Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus.

+
Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus.

 
-
{{ EmbedLiveSample('How_bezierCurveTo_works', 315, 165) }}

+
{{EmbedLiveSample('how_beziercurveto_works', 315, 165)}}

 
-
Une simple courbe cubique de Bézier

+
Une courbe cubique de Bézier simple

 
-
Cet exemple dessine une simple courbe cubique de Bézier en utilisant bezierCurveTo().

+
Cet exemple dessine une courbe cubique de Bézier simple en utilisant bezierCurveTo().

 
 
HTML

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

 
 
JavaScript

 
-
La courbe débute au point spécifiée par moveTo(): (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).

+
La courbe débute au point spécifié par moveTo() : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).

 
-
const canevas = document.getElementById("canvas");
-const contexte2D = canevas.getContext("2d");
+
+const canvas = document.getElementById("canvas");
+const contexte2D = canvas.getContext("2d");
 
 contexte2D.beginPath();
 contexte2D.moveTo(30, 30);
 contexte2D.bezierCurveTo(120,160, 180,10, 220,140);
 contexte2D.stroke();

 
-
Résultat

-
-
{{ EmbedLiveSample('A_simple_Bézier_curve', 700, 180) }}

-
-
Spécifications

+
Résultat

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

+
{{EmbedLiveSample('a_simple_bezier_curve', 700, 180)}}

 
-
Compatibilité des navigateurs

+
Spécifications

 
+
{{Specifications}}

 
+
Compatibilité des navigateurs

 
-
{{Compat("api.CanvasRenderingContext2D.bezierCurveTo")}}

+
{{Compat}}

 
-
Voir aussi

+
Voir aussi

 
 
-- 
cgit v1.2.3-54-g00ecf