Courbes quadratiques

Le script de la page (extraits)

Le canevas fait 300 par 200.
X et Y : dimensions du canevas.

... // X et Y : dimensions de la zone Canvas // les paupières contexte.beginPath(); contexte.moveTo(X/6,Y/2) ; contexte.quadraticCurveTo(X/2, 10, 250,Y/2); contexte.moveTo(X/6,Y/2) ; contexte.quadraticCurveTo(X/2, 190, 250,Y/2); contexte.lineWidth = '4'; contexte.stroke(); // iris de l'oeil contexte.beginPath(); contexte.fillStyle = 'skyblue'; contexte.arc(X/2,Y/2,30,0, Math.PI * 2) ; contexte.fill(); // pupille de l'oeil contexte.fillStyle ="black"; contexte.beginPath(); contexte.arc(X/2,Y/2,5,0, Math.PI * 2) ; contexte.fill(); ...

Commentaire du code

Une courbe quadratique est caractérisée par sa forme parabolique. On peut imaginer une courbe quadratique (ou courbe de Bézier simple) comme une un segment de métal déformé car attiré vers un point qu'il ne touche jamais : point aimant.

Les deux courbes quadratiques ont les mêmes coordonnées pour les points de départ et d'arrivée et pour l'abscisse du point d'inflexion. Seul l'ordonnée du point d'inflexion change : 10 pour la première courbe qui est donc creusée vers le haut et 190 pour la deuxième courbe qui est donc creusée vers le bas.

Retour menu