---

précédentsuivant

En plus des courbes quadratiques, nous pouvons avoir des courbes de Bézier plus générales (du troisième degré).

var x0 = 100; var y0 = 133; var x1 = 120; var y1 = 200; var x2 = 250; var y2 = 160; var x3 = 200; var y3 = 103; ctx.beginPath(); ctx.moveTo(x0, y0); ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3); // <- HERE ctx.lineWidth = 8; ctx.strokeStyle = "red"; ctx.stroke(); // Ce qui suit est simplement pour visualiser ctx.lineWidth = 2; ctx.strokeStyle = "blue"; ctx.beginPath(); // Changez cette ligne à un commentaire! ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineTo(x3, y3); ctx.stroke();

Explication

Nous avons déjà mentionné la référence Wikipédia sur les courbes de Bézier que vous pouvez consulter pour plus de détails.

Pour faire un résumé rapide: Une courbe quadratique, que nous avons vu plus tôt, est décrite par une équation du deuxième degré; une courbe de Bézier est décrite par une équation du troisième degré. Donc, les courbes quadratiques sont des cas particuliers de courbes de Bézier.

Alors que nous avions besoin d'un seul point de contrôle pour une courbe quadratique, nous avons besoin de deux points de contrôle pour décrire une courbe de Bézier arbitraire.

précédentsuivant