Propriedade textBaseline do canvas HTML
Definição e uso
A propriedade textBaseline define ou retorna a linha de base atual usada ao desenhar texto.
A seguir, é demonstrado pelos diferentes tipos de linhas de base suportadas pela propriedade textBaseline:
Nota:fillText() ou strokeText() Quando o método define a posição do texto na tela, ele 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);
gramática
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
Valor do atributo
| Valor | Descrição |
|---|---|
| alphabetic | Padrão. A linha de texto é a linha de letra normal. |
| top | A linha de texto é a parte superior da caixa em em. |
| hanging | A linha de texto é a linha suspensa. |
| middle | A linha de texto é o centro da caixa em em. |
| ideographic | A linha de texto é a linha semântica. |
| bottom | A linha de texto é a parte inferior da caixa em em. |
Detalhes técnicos
| Valor padrão: | alphabetic |
|---|
Suporte do navegador
Os números na tabela indicam a versão do navegador que suportou o atributo pela primeira vez.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Os navegadores Internet Explorer 8 e anteriores não suportam o elemento <canvas>.
