Ejemplo
Dibujar una línea roja en y=100 , a continuación, colocar cada palabra en y=100 con diferentes valores TextBaseline:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Draw a red line at y=100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Place each word at y=100 with different textBaseline values
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100); Inténtalo tú mismo " Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| textBaseline | Sí | 9.0 | Sí | Sí | Sí |
Nota: la propiedad TextBaseline funciona de forma diferente en distintos navegadores, especialmente cuando se utiliza "hanging" o "ideographic" .
Definición y Uso
Los conjuntos de propiedades TextBaseline o devuelve la línea de base de texto actual seguidos en la elaboración del texto.
La ilustración siguiente muestra las distintas líneas de base apoyadas por el textBaseline atributo:
Nota: El fillText() y strokeText() métodos utilizará el valor especificado TextBaseline al posicionar el texto en el lienzo.
| Valor por defecto: | alfabético |
|---|---|
| la sintaxis de JavaScript: | context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"; |
Valores de propiedad
| Valores | Descripción | Juegalo |
|---|---|---|
| alphabetic | Defecto. La línea base del texto es la base de referencia alfabética normales | Juegalo " |
| top | La línea base del texto es la parte superior de la plaza em | Juegalo " |
| hanging | La línea base del texto es la línea de base que cuelga | Juegalo " |
| middle | La línea base del texto es el centro de la plaza em | Juegalo " |
| ideographic | La línea base del texto es la línea base ideográfica | Juegalo " |
| bottom | La línea base del texto es la parte inferior del cuadro delimitador | Juegalo " |