Canvas : courbes quadratiques

Le script de la page (extraits)

... <canvas width = '600' height ='300'></canvas> ... <script> canevas = document.querySelector('canvas'); contexte = canevas.getContext('2d'); var X = canevas.width ; var Y = canevas.height ; // les paupières contexte.beginPath(); contexte.moveTo(100,Y/2) ; contexte.quadraticCurveTo(X/2, 10, X-100,Y/2); contexte.moveTo(100,Y/2) ; contexte.quadraticCurveTo(X/2, Y-20, X-100,Y/2); contexte.lineWidth = '4'; contexte.stroke(); // iris de l'oeil contexte.beginPath(); contexte.fillStyle = 'skyblue'; contexte.arc(X/2,Y/2,60,0, Math.PI * 2) ; contexte.fill(); // pupille de l'oeil contexte.fillStyle ="black"; contexte.beginPath(); contexte.arc(X/2,Y/2,10,0, Math.PI * 2) ; contexte.fill(); ...

Commentaire du code

Le canevas fait 600 pixels par 300.

Une courbe quadratique est caractérisée par sa forme parabolique. On peut imaginer une courbe quadratique (ou courbe de Bézier simple) comme 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.

Il existe aussi les courbes de Bézier cubiques (deux points d'inflexion) qui seront abordées plus loin.

Zone de dessin non adaptative

Affichez cette page avec votre smartphone !

Dans les deux cas l'affichage n'est pas satisfaisant.
Rassurez vous la technologie Canvas est parfaitement compatible avec le "responsive web design" il suffit de définir la taille du canevas via les attributs width et height de la balise CANVAS mais aussi via le CSS ...
Mais je n'en dit pas plus ... visitez la page suivante !
Retour menu