Canvas : animation d'une courbe quadratique
Le code de la page (extrait)
<![CDATA[
...
<canvas width = '300' height ='200' style ="width : 60% ; height : auto ;"></canvas>
...
<script>
...
var yh = 30; var yb = 170 ;
var X = canevas.width ; var Y = canevas.height;
var delta =1 ;
function cercles()
{
contexte.beginPath(); // dessiner iris
contexte.fillStyle = 'skyblue';
contexte.arc(150, 100, 25, 0, Math.PI*2);
contexte.fill();
contexte.beginPath(); //dessiner pupille
contexte.fillStyle ='black';
contexte.arc(150, 100, 10, 0, Math.PI*2);
contexte.fill();
} // fin fonction cercles
setInterval(animate,50);
function animate()
{
contexte.clearRect(0,0, X,Y) ;
cercles(); // appel fonction cercles
contexte.beginPath() ; // nouveau bridage de l'oeil
contexte.moveTo(50,100);
contexte.quadraticCurveTo(150, yh, 250,100);
contexte.quadraticCurveTo(150, yb, 50,100);
contexte.lineWidth = 5 ;
contexte.stroke();
// nouvelles valeurs y_haut et y_bas pour la passe suivante
if (yh == 10 || yb == 190) { delta = 1 ; } // oeil ouvert il faut alors le fermer
if (yh == 50 || yb == 150) { delta = -1 ;} // oeil fermé il faut alors l'ouvrir
yh = yh + delta ; yb = yb - delta ;
} // fin fonction animate
...
]]>
Commentaire du code
Pour le script les dimensions du canevas sont toujours 300 par 200 !
Dans la fonction cercles on dessine le centre de l'oeil.
La fonction animate est appelée toutes les 50 millisecondes soit 20 fois par seconde (1000/50 = 20). Vingt images par seconde c'est une
bonne fréquence pour une animation.
Dans la fonction animate on efface le dessin précédent, on appelle la fonction cercles puis on dessine deux
courbes quadratiques opposées. Mais à chaque fois les ordonnées des points d'inflexion changent (variables yh et yb).
Pour changer les ordonnées des points d'inflexion on utilise une variable delta qui tantôt vaut 1 et tantôt -1 .
Si l'oeil est ouvert delta devient positif et donc on augmente yh et diminue yb donc on commence à refermer l'oeil.
Si l'oeil est fermé (ou presque) delta devient négatif et donc on diminue yh et augmente yb donc on commence à réouvrir l'oeil.
Retour menu