Índice

Agregar texto

Para agregar texto en el área de dibujo, el diseñador dispone de las funciones fillText("texto", x, y) y strokeText("texto", x, y), donde texto es el texto que se quiere incluir, x es la coordenada horizontal de comienzo del texto e y la coordenada vertical de comienzo del texto.

Estos métodos tienen tres propiedades:

La propiedad font define el tipo de letra que se quiere utilizar para el diseño. La sintaxis es idéntica a la de la propiedad de estilo CSS font. El valor por defecto es 10px sans-serif.

Ejemplo

contexto.font = "20pt Arial";

La propiedad textAlign determina la alineación del texto. Los posibles valores son:

  • left para una alineación a la izquierda.

  • right para una alineación a la derecha.

  • center para una alineación centrada.

  • start (por defecto) para una alineación en el inicio de la línea para la escritura de izquierda a derecha.

  • end para una alineación al final de la línea para la escritura de derecha a izquierda.

Ejemplo

contexto.textAlign = "left";

Y por último, la propiedad textBaseline define la línea de referencia de la escritura del texto. Los posibles valores, ilustrados en la siguiente imagen, son top, middle, alphabetic (por defecto) y bottom.

images/11RI18.png

Ejemplo de adición de texto:

<!DOCTYPE html> 
<html lang="es"> 
<head> 
   <title>Html5</title> 
   <meta charset="UTF-8"> 
</head> 
<body>  ...