From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../quadraticcurveto/index.html | 137 +++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html (limited to 'files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto') diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html new file mode 100644 index 0000000000..4978bdd735 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html @@ -0,0 +1,137 @@ +--- +title: CanvasRenderingContext2D.quadraticCurveTo() +slug: Web/API/CanvasRenderingContext2D/quadraticCurveTo +tags: + - API + - Bézier + - Canevas + - Canvas + - CanvasRenderingContext2D + - Courbe + - Courbe de Bézier + - Courbe quadratique + - Courbe quadratique de Bézier + - Méthode + - Quadratique + - Reference +translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.quadraticCurveTo() de l'API Canvas 2D ajoute une courbe de Bézier quadratique au sous-chemin courant. Elle requiert deux points: le premier est le point de contrôle et le second est le point d'arrivée. Le point de départ est le dernier point du chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer la courbe quadratique de Bézier.

+ +

Syntaxe

+ +
void contexte2D.quadraticCurveTo(pointContrôleX, pointContrôleY, pointArrivéeX, pointArrivéeY);
+
+ +

Paramètress

+ +
+
pointContrôleX
+
La coordonnée en x du point de contrôle.
+
pointContrôleY
+
La coordonnée en y du 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.
+
+ +

Exemples

+ +

Comment quadraticCurveTo fonctionne

+ +

Cet exemple montre comment un courbe quadratique de Bézier est dessinée.

+ +

HTML

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

JavaScript

+ +
const canevas = document.getElementById("canvas");
+const contexte2D= canevas.getContext("2d");
+
+// courbe quadratique de Bézier
+contexte2D.beginPath();
+contexte2D.moveTo(50, 20);
+contexte2D.quadraticCurveTo(230, 30, 50, 100);
+contexte2D.stroke();
+
+// Points de départ et d'arrivée
+contexte2D.fillStyle = "blue";
+contexte2D.beginPath();
+contexte2D.arc(50, 20, 5, 0, 2 * Math.PI);   // Point de départ
+contexte2D.arc(50, 100, 5, 0, 2 * Math.PI);  // Point d'arrivée
+contexte2D.fill();
+
+// Point de contrôle
+contexte2D.fillStyle = 'red';
+contexte2D.beginPath();
+contexte2D.arc(230, 30, 5, 0, 2 * Math.PI);
+contexte2D.fill();
+
+ +

Résultat

+ +

Dans cet exemple, le point de contrôle est rouge et les points de départ et d'arrivée sont en bleu.

+ +

{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}}

+ +

Une courbe quadratique simple

+ +

Cet exemple dessine une simple courbe quadratique de Bézier au moyen de la méthode quadraticCurveTo().

+ +

HTML

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

JavaScript

+ +

La courbe commence au point spécifié par moveTo(): (20, 110). Le point de contrôle est placé à (230, 150). La courbe s'achève en (250, 20).

+ +
const canevas = document.getElementById("canvas");
+const contexte2D = canevas.getContext("2d");
+
+contexte2D.beginPath();
+contexte2D.moveTo(20, 110);
+contexte2D.quadraticCurveTo(230, 150, 250, 20);
+contexte2D.stroke();
+
+ +

Résultat

+ +

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

+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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