Alineación vertical
La propiedad textBaseline determina la alineación vertical del texto.
Puede tomar una de las siguientes valores: alphabetic, top, hanging, middle, ideographic y bottom.
Si no especificamos la propiedad textBaseline, el canvas utilizará por defecto alphabetic.
| 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 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 centerY = canvas.height/2;
// crea una linea roja horizontal en el centro del canvas
ctx.strokeStyle="red";
ctx.moveTo(5,centerY);
ctx.lineTo(245,centerY);
ctx.stroke();
ctx.font="12px Arial"
// La propiedad textBaseline tomando varias valores:
ctx.textBaseline="top";
ctx.fillText("Top",5,centerY);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",35,centerY);
ctx.textBaseline="middle";
ctx.fillText("Middle",90,centerY);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",140,centerY);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",200,centerY);
}
}