Sommaire

La balise Canvas Canvas

Le fichier 7_1_spirale.html affiche une spirale animée. Le dessin de la spirale avait déjà été détaillé dans le chapitre Le Web, rajoutons à présent l’interaction avec JavaScript permettant de modifier la vitesse de rotation de la spirale, par exemple.

images/07RI01.png

La copie d’écran montre à gauche une information sur le nombre d’images par seconde (ou frames per second, fps) et à droite quatre boutons. Le premier arrête l’animation, le suivant ralentit l’animation, le troisième l’accélère et le dernier permet de passer en plein écran.

Le code HTML ne contient rien de nouveau.

<body onload="dessine()" > 
    <div id="fullscreen"> 
        <canvas id="spire_id" width="600" height="600"></canvas> 
        <span class="fs-button"></span> 
        <span class="plus_btn"></span> 
        <span class="moins_btn"></span> 
        <span class="stop_btn"></span> 
    </div> 
</body>

Nous avons donc un div, pour le plein écran, la balise canvas pour le dessin de la spirale, et ensuite quatre span permettant d’afficher les boutons.

Les styles de classe des span utilisent la police ...