Atributo textBaseline del canvas HTML
Definición y uso
La propiedad textBaseline establece o devuelve la base de línea actual utilizada para dibujar texto.
La siguiente ilustración muestra las diferentes bases de línea soportadas por la propiedad textBaseline:
Nota:fillText() o strokeText() Al ubicar texto en el lienzo, el método utiliza el valor de textBaseline especificado.
Ejemplo
Define un rectángulo relleno de azul:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Dibuja una línea azul en la posición y=100
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Coloca cada palabra con diferentes valores de textBaseline en y=200
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);
gramática
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
Valor del atributo
| Valor | Descripción |
|---|---|
| alphabetic | Predeterminado. La línea base del texto es la línea de letras estándar. |
| top | La línea base del texto es la parte superior de la caja en em. |
| hanging | La línea base del texto es la línea suspendida. |
| middle | La línea base del texto es el centro de la caja en em. |
| ideographic | La línea base del texto es la línea semántica. |
| bottom | La línea base del texto es la parte inferior de la caja en em. |
Detalles técnicos
| Valor predeterminado: | alphabetic |
|---|
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite por primera vez la propiedad.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
