Propriedade textBaseline do Canvas
Definição e uso
A propriedade textBaseline define ou retorna a linha de base atual usada para desenhar o texto.
A figura a seguir demonstra os diferentes tipos de linhas de base suportadas pela propriedade textBaseline:
Notas:fillText() ou strokeText() ao localizar texto na tela, o método usará o valor de textBaseline especificado.
exemplo
Defina um retângulo preenchido com azul:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Desenhe uma linha azul na posição y=100
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Coloque cada palavra com diferentes valores de textBaseline no 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);
sintaxe
contexto.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
valor do atributo
| valor | descrição |
|---|---|
| alphabetic | padrão. A linha de base do texto é a linha de letras comuns. |
| top | a linha de base do texto é o topo da caixa em. |
| hanging | a linha de base do texto é a linha suspensa. |
| middle | a linha de base do texto é o meio da caixa em. |
| ideographic | a linha de base do texto é a linha ideográfica. |
| bottom | a linha de base do texto é o fundo da caixa em. |
detalhes técnicos
| padrão: | alphabetic |
|---|
Suporte do navegador
Os números na tabela indicam a versão do navegador que suportou completamente essa propriedade pela primeira vez.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Notas:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.
