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 --- .../beziercurveto/index.md | 106 ++++++++++----------- 1 file changed, 52 insertions(+), 54 deletions(-) (limited to 'files/fr/web/api/canvasrenderingcontext2d/beziercurveto') diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md index f5e140589e..eb9c087775 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md @@ -4,47 +4,46 @@ slug: Web/API/CanvasRenderingContext2D/bezierCurveTo translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo browser-compat: api.CanvasRenderingContext2D.bezierCurveTo --- -
{{APIRef}}
+{{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 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](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier) 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()`](/fr/docs/Web/API/CanvasRenderingContext2D/moveTo) avant de créer une courbe de Bézier. -

Syntaxe

+## Syntaxe -
void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-
+```js +void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); +``` -

Paramètres

+### Paramètres -
-
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.
-
+- `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

+## Exemples -

Fonctionnement de bezierCurveTo()

+### Fonctionnement de bezierCurveTo() -

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

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

HTML

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

JavaScript

+#### JavaScript -
+```js
 // Define canvas and context
 const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
@@ -74,52 +73,51 @@ 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

+#### 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 courbe cubique de Bézier simple

+### Une courbe cubique de Bézier simple -

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

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

HTML

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

JavaScript

+#### JavaScript -

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

+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). -
+```js
 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();
+contexte2D.stroke(); +``` -

Résultat

+#### Résultat -

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

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

Spécifications

+## Spécifications -

{{Specifications}}

+{{Specifications}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat}}

+{{Compat}} -

Voir aussi

+## Voir aussi - +- L'interface définissant cette méthode : [`CanvasRenderingContext2D`](/fr/docs/Web/API/CanvasRenderingContext2D) +- [L'article Wikipédia sur les courbes de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier) -- cgit v1.2.3-54-g00ecf