---

précédentsuivant

Une courbe quadratique peut être vue comme étant un segment de parabole (avec orientation arbitraire). Le code ci-dessous trace un tel segment de parabole.

ctx.beginPath(); ctx.moveTo(100, 133); ctx.quadraticCurveTo(150, 167, 200, 133); ctx.lineWidth = 4; ctx.strokeStyle = "red"; ctx.stroke(); // ignorez ce qui suit lors de votre première lecture if (explain) { ctx.beginPath(); ctx.lineWidth = 1; ctx.moveTo(0, 67); ctx.lineTo(150, 167); ctx.lineTo(300, 67); ctx.strokeStyle = "lightgreen"; ctx.stroke(); }

Explication

Pour vous aider à mieux comprendre comment ceci fonctionne, changez la valeur de la variable explain à true dans la fenêtre , et ensuite lisez ce qui suit.

Considérez les 3 points suivants
A = (x1, y1),
C = (x2, y2), et
B = (x3, y3).

Le point de départ est A; C est connu sous le nom de point de contrôle et B est le point final. La courbe quadratique passe par A et B de telle façon qu'elle soit tangente en A au segment de ligne droite joignant A et C; elle est également tangente en B au segment de ligne droite joignant B et C.

La syntaxe pour créer une courbe quadratique est

ctx.moveTo(x1, y1); // ou l'équivalent pour arriver en A ctx.quadraticCurveTo(x2, y2, x3, y3);

Note

Une courbe quadratique est un exemple de courbe de Bézier. Des animations intéressantes se trouvent sur cette page de Wikipédia.

précédentsuivant