Canvas : courbe de Bézier animée

Le canevas

Le code de la page

... <canvas width ="900" height ="450" style ="width : 80% ; height : auto ;"></canvas> <script> ... var X = canevas.width ; var Y = canevas.height; var i = 0; // variable fonction du temps var sens = 1 ; setInterval(animate,50); function animate() { contexte.clearRect(0,0,X,Y); var y = Math.abs(Y -i) ; // y : ordonnée du point de départ et d'arrivée de la courbe // avec la fonction abs : y est toujours positif contexte.beginPath(); contexte.moveTo(0, y); // ordonnée du point d'origine est y contexte.bezierCurveTo(X/3, 0, 2*X/3, Y, X, y); // les coordonnées des points aimants ne changent pas contexte.lineWidth = '2' ; contexte.stroke(); if (i==Y) sens = -1; if (i==0) sens = 1 ; i = i +sens ; } // fin fonction animate ...

Pour le script les dimensions du canevas sont 900 par 450 !

Les coordonnées des points d'inflexion ne changent pas ainsi que les abscisses des points de départ et d'arrivée.
Ce qui change ce sont les ordonnées du point de départ et du point d'arrivée qui sont désignées par la variable y.
La valeur de y est égal à la valeur absolue de (Y - i). Donc y est toujours positif !
La variable i est tantôt incrémentée et tantôt décrémentée via la variable sens qui tantôt vaut 1 et tantôt -1.


Retour menu