NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Tutorial HTML5 Canvas2D parte 2 (texto)

02 de Noviembre del 2011 por Josep Antoni Bover, 0 visitas, 0 comentarios, 0 votos
Categorías : Canvas 2D, HTML, JavaScript, Programación.
La web está en segundo plano, animación en pausa.
Cargando animación...
Tutorial HTML5 Canvas2D parte 2 (texto)

Hoy vamos a seguir con el objeto canvas en dos dimensiones, y esta vez vamos a ver cómo podemos pintar texto en él.

La idea es hacer una animación carácter a carácter de un texto.

Además veremos que pintar texto dentro del objeto canvas no es como meter cualquier etiqueta de texto, la cosa varia bastante ya que no se pueden utilizar etiquetas, y si por ejemplo quisiéramos centrar el texto deberíamos obtener el tamaño del canvas en pixeles, restarle el tamaño de todo el texto en pixeles, y dividir el resultado por dos. A la vieja usanza como a mí me gusta :).

Al igual que con el primer tutorial vamos a empezar por definir algunas variables globales.

Variables globales
1
2
3
4
5
6
7
// Variables globales
var Temporizador2 = 0; // ID del Temporizador2
var Context; // Contexto gráfico
var PosX = 5; // Posición X del texto
var PosY = 32; // Posición Y del texto
var PosTexto = 0; // Caracter actual
var Texto = ""; // Cadena de texto a animar

En primer lugar tenemos la variable Temporizador la cual se utilizara para guardar la ID del temporizador que realizara la llamada a la función principal de la animación, la variable Context se utilizara para guardar el contexto grafico del canvas y desde donde llamaremos a las funciones de pintado de él, las variables PosX y PosY guardaran la posición X e Y actuales donde se tiene que pintar el siguiente carácter, la variable PosTexto guardara la posición del carácter actual, y por último la variable Texto guardara la cadena de caracteres que se tiene que animar.

Seguimos con la función que inicia el Canvas y el temporizador para pintar los caracteres :

Función AnimarTexto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Función que inicia la animación
function AnimarTexto(Txt) {
clearInterval(Temporizador2);
var Canvas = document.getElementById("canvas");
if (Canvas.getContext) { Context = Canvas.getContext("2d"); }
else { alert("Tu navegador no soporta el objeto canvas!"); return; }
PosX = 5;
PosY = 32;
PosTexto = 0;
Texto = Txt;
Context.fillStyle = "rgb(0, 0, 0)";
Context.fillRect(0, 0, Context.canvas.width, Context.canvas.height);
Context.font = 'normal 400 32px sans-serif';
Temporizador2 = setInterval("PintarCaracter()", 100);
}

En primer lugar en la línea 3 obtenemos el objeto HTML Canvas, luego en la línea 4 comprobamos que tenga la función getContext ya que si no está disponible es que el navegador no soporta el objeto Canvas. Si todo ha ido bien, pasamos a la línea 6 donde empezamos a inicializar las variables de la animación.

En la línea 10 establecemos el color con el que vamos a pintar el fondo (negro) utilizando el atributo fillStyle, y luego en la línea 11 pintamos un rectángulo que abarca todo el objeto Canvas utilizando la función fillRect.

En la línea 12 establecemos las propiedades de la fuente con el atributo font. Cuidado porque no acepta cualquier cosa, en este caso especificamos que la fuente será normal (podría ser italic, underline, etc...), luego especificamos el grueso de la fuente (400 es lo normal, para ser negrita debería ser 1000), luego especificamos el tamaño en pixeles (en este caso 32 pixeles), y por ultimo especificamos el nombre de la fuente.

Y finalmente en la línea 13 activamos un temporizador que llamara a la función PintarCaracter cada 100 milisegundos con la función setInterval.

Ahora pasemos a ver la función PintarCaracter :

Función PintarCaracter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// Función que pinta un caracter del texto
// NOTA si se encuentra un salto de linea, calcula la posicion de la nueva linea.
function PintarCaracter() {
// Si llegamos al final del texto desactivamos el Temporizador2 y salimos
if (PosTexto == Texto.length) {
clearInterval(Temporizador2);
return;
}
Caracter = Texto.charAt(PosTexto ++);
// Si el caracter es un salto de linea ajustamos la posición y salimos
if (Caracter == "\n" || Caracter.charCodeAt(0) == 13) {
PosY += 32;
PosX = 5;
return;
}
// Pintamos el caracter actual con un color aleatorio
else {
// Creamos un color aleatorio
ColR = Math.round(200 * Math.random()) + 55;
ColG = Math.round(200 * Math.random()) + 55;
ColB = Math.round(200 * Math.random()) + 55;
Context.strokeStyle = "rgb(" + ColR + ", " + ColG + ", " + ColB + ")";
// Pintamos el borde del caracter actual
Context.strokeText(Caracter, PosX, PosY);
// Medimos el caracter actual y sumamos su tamaño a la posición X
Tam = Context.measureText(Caracter);
PosX += Tam.width;
}
}

En primer lugar la función mira en la línea 5 si el carácter actual ha sobrepasado el texto, por lo que terminaremos la animación. Para ello utilizamos la función clearInterval que elimina el temporizador encargado de la animación.

En la línea 9 obtenemos el carácter actual de la variable Texto utilizando la función charAt, y lo guardamos en la variable Caracter.

En la línea 11 comprobamos si el carácter actual es un carácter de salto de línea, en cuyo caso ajustamos las posiciones X e Y y salimos de la función de pintado. Fijaros que busco o el caracter \n y luego utilizo la función charCodeAt especificando el número 13.

Si llega a la línea 17 es que se trata de un carácter normal, por lo que procedemos a crear un color aleatorio de 55 a 255 (así nos aseguramos que no salga muy oscuro) utilizando la función Math.random, y redondeamos el resultado con la función Math.round ya que el random devuelve resultados decimales que no son validos para nuestro propósito.

En la línea 22 asignamos el color para el borde del texto utilizando el atributo strokeStyle y los canales de colores que previamente creamos a partir de la línea 17.

En la línea 24 pintamos el carácter actual en la posición X e Y que toca utilizando la función strokeText.

En la línea 26 obtenemos el ancho del carácter actual utilizando la función measureText. Ojo porque esta función solo devuelve el ancho, no he visto ninguna función que devuelva la altura.

Y por ultimo en la línea 27 sumamos el ancho del carácter que obtuvimos previamente a la variable PosX.

Iniciar la animación

Y esto es todo por hoy, espero que este tutorial os sirva de ayuda. Como siempre podéis ver un ejemplo simplificado online o descargar el ejemplo.

Ver ejemplo Descargar ejemplo