Canvas : déplacement du texte dans un bandeau

La bannière

Le code de la page (extrait)

Code HTML

<canvas width ="800" height ="100" style= "width:100% ; height :100px ; background-image : linear-gradient(90deg, seagreen, lime )"> </canvas>

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,10) ; function deplacement() { contexte.clearRect(0,0,X,Y); x = x-2 ; if(x <-750) x = X ; contexte.strokeText('Bannière animée avec Canvas',x, y); } // fin fonction deplacement ...

Pour le script les dimensions du canevas sont toujours 800 par 100 !

Grâce à la fonction setInterval() la fonction deplacement est appelée toutes les 10 millisecondes donc 100 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