Alineación horizontal
La propiedad textAlign especifica el tipo de alineación horizontal del texto.
Puede tomar una de las siguientes valores: center ( centrar texto ), left ( alinear texto a la izquierda),
right ( alinear texto a la derecha ), start y end.
En idiomas como el castellano, con un sistema de escritura de izquierda a derecha, start == left
y
end == right,
mientras que en idiomas con sistemas de escritura de derecha a izquierda, como el hebreo, pasa todo lo contrario: start es lo mismo que right y end es lo mismo que left.
| JavaScript | Descripción | Defecto | |
|---|---|---|---|
| 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 horizontal 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.
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
var centerX = canvas.width/2;
// crea una linea roja vertical en el centro del canvas
ctx.strokeStyle="red";
ctx.moveTo(centerX,20);
ctx.lineTo(centerX,170);
ctx.stroke();
ctx.font="12px Arial";
// La propiedad textAlign tomando varias valores:
ctx.textAlign="left";
ctx.fillText("textAlign=left",centerX,60);
ctx.textAlign="center";
ctx.fillText("textAlign=center",centerX,80);
ctx.textAlign="right";
ctx.fillText("textAlign=right",centerX,100);
ctx.textAlign="start";
ctx.fillText("textAlign=start",centerX,120);
ctx.textAlign="end";
ctx.fillText("textAlign=end",centerX,140);
}
}