Escribiendo en el canvas
Para dibujar texto, utilizaremos una serie de métodos() y propiedades de <canvas>.
| JavaScript | Descripción | Defecto | |
|---|---|---|---|
| fillStyle | context.fillStyle = color | gradiente | patrón; | Determina (sets) o devuelve (returns) el color, gradiente o patrón del relleno. | black |
| strokeStyle | context.strokeStyle = color | gradiente | patrón; | Determina (sets) o devuelve (returns) el color, gradiente o patrón de la línea. | black |
| lineWidth | context.lineWidth=numero; | Determina (sets) o devuelve (returns) la grosor de la línea. | 1 |
| font | context.font = "italic small-caps bold 12px arial"; | Determina (sets) o devuelve (returns) las propiedades del texto ( font-style, font-variant, font-weight, font-size, font-family ) | 10px sans-serif |
| textAlign | context.textAlign = "center | end | left | right | start"; | Especifica el tipo de alineación del texto. | start |
| textBaseline | context.textBaseline = "alphabetic | top | hanging | middle | ideographic | bottom"; |
Determina (sets) o devuelve (returns) la alineación vertical del texto. | alphabetic |
| fillText() | context.fillText(text,x,y,maxWidth); | Dibuja texto relleno con un color, gradiente o patrón previamente definido.maxWidth es opcional. |
black |
| strokeText() | context.strokeText(text,x,y,maxWidth); | Dibuja texto bordeado con un color, gradiente o patrón previamente definido.maxWidth es opcional. |
black |
| measureText() | context.measureText(text).width; | Devuelve un objeto que contiene la anchura del texto especificado entre paréntesis. |
Vea la chuleta con las propiedades y metodos() de canvas.
La propiedad font
Determina las propiedades del texto, las mismas que utilizamos en CSS, y en este mismo orden: font-style, font-variant, font-weight, font-size y font-family.
Podemos utilizar todas estas propiedades o solo algunas de ellas.
Ejemplos:
context.font="2em Verdana"; context.font="italic small-caps bold 12px arial"; context.font="italic bold 12pt Times New Roman, serif ";
strokeText ( bordeado de texto ) y fillText ( relleno de texto )
El canvas transforma el texto en un trazado, y exactamente como con los demás trazados podemos utilizar lineWidth, strokeStyle y fillStyle,
además de métodos() específicos como fillText(), para rellenar el texto (de color, gradiente o patrón ), y strokeText(), para dibujar un borde alrededor del texto.
La sintaxis para estos dos métodos es:
context.fillText(text,x,y,maxWidth); context.strokeText(text,x,y,maxWidth);
Donde:
- text representa el texto que queremos escribir;
- x e y representan las coordenadas de la esquina izquierda arriba del texto;
- maxWidth es un parámetro opcional y representa la anchura máxima del texto.
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
var centerX = canvas.width/2;
ctx.textAlign="center";
ctx.font="30pt Verdana";
ctx.fillStyle = "blue";
ctx.fillText("fillText",centerX,60);
ctx.font="25pt Verdana";
ctx.strokeStyle="green";
ctx.lineWidth = 2;
ctx.strokeText("strokeText",centerX,120);
}
}