HTML canvas textBaselinePropiedad
Objeto CanvasEjemplo
Dibuja una línea roja en y=100, luego coloca cada palabra con diferentes valores de textBaseline en y=100:
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);
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);
Pruébalo »
Soporte del navegador
Internet Explorer 9, Firefox, Opera, Chrome y Safari admiten la propiedad textBaseline.
Nota:La propiedad textBaseline produce efectos diferentes según el navegador, especialmente al usar "hanging" o "ideographic".
Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
Definición y uso
La propiedad textBaseline establece o devuelve la línea base de texto actual al dibujar texto.
El siguiente diagrama ilustra las diversas líneas base que admite la propiedad textBaseline:
Nota:fillText()ystrokeText()Cuando se posiciona texto en el lienzo, el método utilizará el valor de textBaseline especificado.
| Valor predeterminado: | alphabetic |
|---|---|
| Sintaxis de JavaScript: | context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"; |
Valores de la propiedad
| Valor | Descripción |
|---|---|
| alphabetic | Predeterminado. La línea base de texto es la línea base alfabética normal. |
| top | La línea base de texto es la parte superior del cuadro em. |
| hanging | La línea base de texto es la línea base colgante. |
| middle | La línea base de texto es el centro del cuadro em. |
| ideographic | La línea base de texto es la línea base ideográfica. |
| bottom | La línea base de texto es la parte inferior del cuadro em. |
Otras extensiones