HTML5 Testo Canvas animato

In questo articolo viene creato un testo animato mediante canvas.

Il tag <canvas> è un nuovo tag offerto dalla specifica HTML5 , e può essere impiegato per disegnare ed operare con elementi grafici. Necessita di un linguaggio di scripting di supporto come JavaScript, per funzionare correttamente e sfruttare a pieno le sue potenzialità.

In supporto a canvas, sono nate parecchie librerie in grado di rendere più fruibile ed intuitivo l’interfacciamento con questo elemento: ogni libreria ha esaltato specifiche peculiarità delle API orientando il Canvas in un particolare contesto di utilizzo, come ad esempio lo sviluppo di giochi bidimensionali, di animazioni tridimensionali, di manipolazione video, e molto altro.

Nell’esempio mostrato in questo articolo verrà usato il tag <canvas> creando al suo interno una stringa testuale in movimento verticale.

Creiamo per prima cosa il tag <canvas> all’interno del body della pagine html:


<canvas style="float:left"  id="canvasOne" width="500" height="500">
 Your browser does not support HTML5 Canvas.
</canvas>

Fatto ciò inizializziamo le variabili attrici dello script:


var canvasWidth;
var canvasHeight;
var interval = 10;
var pos = 0;
var increment = 2;

La funzione init()  ha il compito di inizializzare tali variabili e avviare quindi il processo:


function init() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext('2d');
    canvasWidth = canvas.width;
    canvasHeight = canvas.height;

    setInterval(function () {
        redraw();
    }, interval);
}

La funzione redraw() ha il compito di cancellare il testo precedente all’interno del canvas, e quindi ridisegnarlo spostato dispetto alla posizione attuale, del valore increment.

Quest’ ultimo valore sarà positivo o negativo in base alla posizione attuale del testo. Se raggiunge il fondo del box canvas sarà negativo, altrimenti positivo.

La traslazione del testo avviene mediante la funzione translate() che riceve come input le coordinate x,y di traslazione.


function redraw() {
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    ctx.save();

    ctx.translate(canvasWidth / 2 - 50, 0 + pos);
    ctx.fillText("Hello world", 0, 0);

    ctx.restore();

    pos = pos + increment;
    if(pos > canvasHeight)
        increment = -10;
    else if(pos <= 0)
        increment = 2;
}

Al posto della traslazione è possibile fare ruotare il testo mediante l’uso del metodo rotate():


 context.rotate(angleInDegrees * Math.PI / 180);

Qui l’esempio funzionante (clicca mi piace per il link):

[like_to_read]http://jsfiddle.net/michelejs/gpTJh/[/like_to_read]

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell'universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.