move *.html to *.md

1 files changed, 125 insertions, 0 deletions

diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md
new file mode 100644
index 0000000000..f5e140589e
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md
@@ -0,0 +1,125 @@
+---
+title: CanvasRenderingContext2D.bezierCurveTo()
+slug: Web/API/CanvasRenderingContext2D/bezierCurveTo
+translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo
+browser-compat: api.CanvasRenderingContext2D.bezierCurveTo
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D.bezierCurveTo()</strong></code> de l'API Canvas 2D ajoute une <a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">courbe de Bézier</a> 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 <a href="/fr/docs/Web/API/CanvasRenderingContext2D/moveTo"><code>moveTo()</code></a> avant de créer une courbe de Bézier.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cp1x</code></dt>
+ <dd>L'abscisse du premier point de contrôle.</dd>
+ <dt><code>cp1y</code></dt>
+ <dd>L'ordonnée du premier point de contrôle.</dd>
+ <dt><code>cp2x</code></dt>
+ <dd>L'abscisse du second point de contrôle.</dd>
+ <dt><code>cp2y</code></dt>
+ <dd>L'ordonnée du second point de contrôle.</dd>
+ <dt><code>x</code></dt>
+ <dd>L'abscisse du point d'arrivée.</dd>
+ <dt><code>y</code></dt>
+ <dd>L'ordonnée du point d'arrivée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="how_beziercurveto_works">Fonctionnement de bezierCurveTo()</h3>
+
+<p>Cet exemple montre comment une courbe cubique 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;">
+// Define canvas and context
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Define the points as {x, y}
+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();
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus.</p>
+
+<p>{{EmbedLiveSample('how_beziercurveto_works', 315, 165)}}</p>
+
+<h3 id="a_simple_bezier_curve">Une courbe cubique de Bézier simple</h3>
+
+<p>Cet exemple dessine une courbe cubique de Bézier simple en utilisant <code>bezierCurveTo()</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 débute au point spécifié par <code>moveTo()</code>&nbsp;: (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).</p>
+
+<pre class="brush: 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();</pre>
+
+<h4 id="result_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('a_simple_bezier_curve', 700, 180)}}</p>
+
+<h2 id="specifications">Spécifications</h2>
+
+<p>{{Specifications}}</p>
+
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="see_also">Voir aussi</h2>
+
+<ul>
+ <li>L'interface définissant cette méthode : <a href="/fr/docs/Web/API/CanvasRenderingContext2D"><code>CanvasRenderingContext2D</code></a></li>
+ <li><a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">L'article Wikipédia sur les courbes de Bézier</a></li>
+</ul>