Canvas : déplacement du texte dans un bandeau

Si vous visualisez cette page avec un smartphone, optez pour l'orientation "portrait" !

La bannière

Un tableau de 1 lignes avec trois cellules.
Les cellules de gauche et droite contiennent une image tandis que celle du milieu contient un canevas.

Le code de la page (extrait)

La feuille de style

canvas{background-image : linear-gradient(90deg, seagreen, lime ) ; } img {height : 100px ; } table {width : 100% ; border : none ;} td{border :none ;}

Boîte CANVAS remplie avec un dégradé linéaire défini en CSS.
Le tableau a la largeur de son conteneur.

Le HTML

<table> <tr> <td style ="width:10%;"><img src = "../images/ffessm.jpg"></td> <td style ="width:80%"> <canvas style= "width:100% ; height :100px;"></canvas> </td> <td style ="width:10%;"><img src = "../images/logo_club.jpg"></td> </tr> </table>

Les largeurs des cellules du tableau à ligne unique sont exprimées en pourcentage.

Le script

// canevas référence la balise CANVAS var X = canevas.width ; var Y = canevas.height; contexte.textAlign ='left'; contexte.textBaseline = 'middle'; contexte.font = " bold italic 60px arial" ; contexte.strokeStyle ='navy'; contexte.lineWidth = 3; var x = X ; y = 50; setInterval(deplacement,20) ; function deplacement() { contexte.clearRect(0,0,X,Y); x = x-2 ; if(x <-750) x = X ; contexte.strokeText('Club de plongée de Calais',x, y); } // fin fonction deplacement ...

Grâce à la fonction setInterval() la fonction deplacement est appelée toutes les 20 millisecondes donc 50 fois par seconde.
Dans le cadre de la fonction deplacement on efface le texte précédent et on l'affiche de nouveau avec un point de référence différent.
Retour menu