Propiedad textBaseline de Canvas
Definición y uso
La propiedad textBaseline establece o devuelve la línea de base actual al dibujar texto.
La siguiente ilustración muestra las diferentes líneas base que admite la propiedad textBaseline:
Nota:fillText() o strokeText() Al localizar texto en el lienzo, el método utilizará el valor de textBaseline especificado.
Ejemplo
Defina un rectángulo relleno de azul:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Dibuje una línea azul en la posición y=100
ctx.strokeStyle="azul";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Coloque cada palabra con diferentes valores de textBaseline en y=200
ctx.textBaseline="superior";
ctx.fillText("Superior",5,100);
ctx.textBaseline="inferior";
ctx.fillText("Inferior",50,100);
ctx.textBaseline="centro";
ctx.fillText("Centro",120,100);
ctx.textBaseline="alfabético";
ctx.fillText("Alfabético",190,100);
ctx.textBaseline="suspendida";
ctx.fillText("Suspendida",290,100);
Sintaxis
contexto.textBaseline="alfabético|superior|suspendida|centro|ideográfico|inferior";
Valor del atributo
| Valor | Descripción |
|---|---|
| alfabético | Predeterminado. La línea base del texto es la línea base de las letras comunes. |
| superior | La línea base del texto es la parte superior del cuadro em. |
| suspendida | La línea base del texto es la línea base suspendida. |
| centro | La línea base del texto es el centro del cuadro em. |
| ideográfico | La línea base del texto es la línea base ideográfica. |
| inferior | La línea base del texto es la base del cuadro em. |
Detalles técnicos
| Valor predeterminado: | alfabético |
|---|
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite completamente 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>.
