Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Canvas básico

Crea tus propios dibujos y animaciones con Canvas en HTML5

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

Canvas básico (X)

Textos

Metodos de texto

Para escribir texto dentro de un canvas podemos usar los métodos fillText() y strokeText().

Estos métodos tienen la siguiente sintaxis:

cxt.fillText("texto",x,y)

cxt.strokeText("texto",x,y)

Los parámetros indican lo mismo en los dos métodos. El primer parámetro es el texto que queremos escribir, y podemos pasarlo directamente entre comillas como una cadena de texto, o mediante una variable. El segundo y tercer parámetro son las coordenadas donde se escribirá el texto en el canvas.

La diferencia entre fillText() y strokeText() es que fillText() dibuja las letras tal y como las veríamos fuera del canvas, mientras que strokeText dibuja una línea alrededor de la letra, dejando hueco lo que es la letra en sí.

Tamaño y estilo.

Las características que definen el aspecto del texto, tales como tamaño, estilo y tipografía se definen mediante la propiedad font.

cxt.font="bold italic 12px arial";

El valor de la propiedad font es el mismo que tendría la propiedad font de CSS, escrito aquí entre comillas. Tal como hacemos en CSS pondremos en primer lugar el grosor y estilo, después el tamaño y después el tipo de fuente.

El color de texto se consigue con las propiedades ya vistas fillStyle y strokeStyle, las cuales cambian el color a fillText() y strokeText() respectivamente.

Veamos un ejemplo. Tenemos un canvas con el siguiente código HTML:

<canvas id="ejemplo1" width="160" height="160">
</canvas>

Ahora escribimos el código javascript para el canvas, recuerda que debes poner antes la función iniciaCanvas() explicada en la segunda página de este manual, y además debemos escribir el código dentro de la función window.onload=function().

cxt1=iniciaCanvas("ejemplo1");
if (cxt1) {
texto="Hola mundo"; //texto de prueba
cxt1.beginPath() //iniciar ruta
cxt1.strokeStyle="blue"; //color externo
cxt1.fillStyle="red"; //color de relleno
cxt1.font="bold 20px arial"; //estilo de texto
cxt1.strokeText(texto,10,30); //texto con método stroke
cxt1.fillText(texto,10,80); //texto con método fill
cxt1.strokeText(texto,10,140); //texto con los dos métodos
cxt1.fillText(texto,10,140);
}

El resultado del canvas anterior lo vemos aquí a la derecha.

Observamos aquí la diferencia entre el método strokeText en la parte de arriba, el método fillText en el centro, o usar los dos métodos en un mismo texto abajo del todo.

Alineación del texto

Por defecto las coordenadas que definimos para el texto marcan el extremo inferior izquierda del mismo. Es decir a partir de ese punto el texto se empieza a escribir por encima y hacia la derecha.

Esto podemos cambiarlo mediante las propiedades de alineación.

Alineación horizontal

La propiedad textAlign controla la alineación horizontal del texto:

cxt.textAlign="start | end | left | right | center";

Los posibles valores que puede tener esta propiedad son:

• start : Indica el principio del texto. Éste se coloca a la derecha del punto. es el valor por defecto.
• end : Indica el final del texto. Éste se coloca a la izquierda.

• left : Posicion del punto a la izquierda. El texto avanza hacia la derecha.

• right : Posicion del punto a la derecha. El texto se queda a su izquierda.

• center : Posicion del punto centrado. El texto se queda centrado respecto al punto indicado.

Los valores start y left por un lado y end y right por el otro son equivalentes mientras usemos alfabetos occidentales, sólamente usando alfabetos con otro sentido de escritura (como el árabe o el japonés), sus valores serían distintos.

Alineación vertical

La alineación vertical se controla con la propiedad textBaseline. vemos aquí su sintaxis y sus valores:

cxt.textBaseline="top | middle | bottom | hanging | alphabetic | ideographic"

Los valores hanging, alphabetic y ideographic están relacionados con los distintos tipos de escritura en distintos tipos de alfabetos (árabe, chino, etc.). Como aquí se supone que vamos a escribir sólo con nuestro alfabeto nos centraremos en los otros tres valores:

• top : El punto de referencia queda encima del texto, por lo que éste se verá debajo de él.
• middle : El punto de referencia queda en medio del texto, por lo que éste se verá centrado verticalmente respecto de él.
• bottom : El punto de referencia queda debajo del texto, por lo que éste se verá encima de él.

Ejemplo de canvas con alineaciones.

Como ejemplo haremos un canvas en el que se vean los distintos tipos de alineación. Para ello primero dibujaremos unas líneas de referencia, y después colocaremos texto en esas líneas para ver cómo quedan las alineaciones.

Como siempre empezamos por el código HTML:

<canvas id="ejemplo2" width="200" height="200">
</canvas> 

Para seguir con el código javascript, que tal como hemos dicho antes, tiene que tener anteriormente la función iniciaCanvas() y ponerlo dentro del window.onload=function().

cxt2=iniciaCanvas("ejemplo2");
if (cxt2) {
cxt2.beginPath(); //iniciar ruta
cxt2.strokeStyle="#aaa"; //color relleno y texto
cxt2.fillStyle="navy"; //color líneas
cxt2.moveTo(50,0);  //crear líneas: línea vertical
cxt2.lineTo(50,200); 
for (i=30;i<=180;i+=30) { //varias líneas horizontales
    cxt2.moveTo(0,i);
    cxt2.lineTo(200,i);
    }
cxt2.stroke(); //viisualizar líneas
cxt2.font="14px arial"; //estilo del texto
//Diferentes estilos de alineación horizontal:
cxt2.textAlign="start";
cxt2.fillText("start",50,30);
cxt2.textAlign="end";
cxt2.fillText("end",50,60);
cxt2.textAlign="left";
cxt2.fillText("left",50,90);
cxt2.textAlign="right";
cxt2.fillText("right",50,120);
cxt2.textAlign="center";
cxt2.fillText("center",50,150);
cxt2.textAlign="start"; // volvemos al estilo inicial.
//Diferentes estilos de alineación vertical
cxt2.textBaseline="top";
cxt2.fillText("top",100,30);
cxt2.textBaseline="middle";
cxt2.fillText("middle",100,60);
cxt2.textBaseline="bottom";
cxt2.fillText("bottom",100,90);
cxt2.textBaseline="hanging";
cxt2.fillText("hanging",100,120);
cxt2.textBaseline="alphabetic";
cxt2.fillText("alphabetic",100,150);
cxt2.textBaseline="ideographic";
cxt2.fillText("ideographic",100,180);
}

El resultado puedes verlo en el canvas de la derecha.

A la izquierda están las distintas alineaciones en horizontal, mientras que a la derecha tenemos las distintas alineaciones en vertical. Los puntos de referencia para en el texto de alineación horizontal están puestos encima de la línea vertical, mientras que los puntos de referencia de los textos de alineación vertical están puestos en las distintas líneas horizontales.

En la siguiente página veremos como incorporar imágenes al canvas

Insertar imágenes

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com