initial commit

1 files changed, 137 insertions, 0 deletions

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
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.quadraticCurveTo()</code></strong> de l'API Canvas 2D ajoute une <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">courbe de Bézier</a> 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.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void contexte2D.quadraticCurveTo(<em>pointContrôleX</em>, <em>pointContrôleY</em>, <em>pointArrivéeX</em>, <em>pointArrivéeY</em>);
+</pre>
+
+<h3 id="Paramètress">Paramètress</h3>
+
+<dl>
+ <dt><code>pointContrôleX</code></dt>
+ <dd>La coordonnée en x du point de contrôle.</dd>
+ <dt><code>pointContrôleY</code></dt>
+ <dd>La coordonnée en y du point de contrôle.</dd>
+ <dt><code>pointArrivéeX</code></dt>
+ <dd>La coordonnée en x du point d'arrivée.</dd>
+ <dt><code>pointArrivéeY</code></dt>
+ <dd>La coordonnée en y du point d'arrivée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Comment_quadraticCurveTo_fonctionne">Comment quadraticCurveTo fonctionne</h3>
+
+<p>Cet exemple montre comment un courbe quadratique de Bézier est dessinée.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[7]">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();
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Dans cet exemple, le <span style="color: red;">point de contrôle est rouge</span> et les <span style="color: blue;">points de départ et d'arrivée sont en bleu</span>.</p>
+
+<p>{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}}</p>
+
+<h3 id="Une_courbe_quadratique_simple">Une courbe quadratique simple</h3>
+
+<p>Cet exemple dessine une simple courbe quadratique de Bézier au moyen de la méthode <code>quadraticCurveTo()</code>.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p>La courbe commence au point spécifié par <code>moveTo()</code>: (20, 110). Le point de contrôle est placé à (230, 150). La courbe s'achève en (250, 20).</p>
+
+<pre class="brush: js; highlight:[6]">const canevas = document.getElementById("canvas");
+const contexte2D = canevas.getContext("2d");
+
+contexte2D.beginPath();
+contexte2D.moveTo(20, 110);
+contexte2D.quadraticCurveTo(230, 150, 250, 20);
+contexte2D.stroke();
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('A_simple_quadratic_curve', 700, 180)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface définissant cette méthode : {{domxref("CanvasRenderingContext2D")}}</li>
+ <li><a href="http://fr.wikipedia.org/wiki/Courbe_de_Bézier">L'article Wikipédia sur les courbes quadratiques de Bézier</a></li>
+</ul>