Propriedade textAlign do Canvas
Definição e uso
textAlign A propriedade de ancoragem define ou retorna o alinhamento atual do conteúdo do texto.
Normalmente, o texto começa na posição especificada, mas, se você definir textAlign="direita" e posicionar o texto na posição 150, ele terminará na posição 150.
dica:usando fillText() ou strokeText() o método realmente desenha e posiciona o texto no canvas.
exemplo
Criar uma linha vermelha na posição 150. A posição 150 é o ponto de âncora para todos os textos definidos nos exemplos a seguir. Estude o efeito de cada valor de textAlign:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Criar uma linha azul na posição 150
ctx.strokeStyle="azul";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Mostrar diferentes valores de textAlign
ctx.textAlign="início";
ctx.fillText("textAlign=início",150,60);
ctx.textAlign="fim";
ctx.fillText("textAlign=fim",150,80);
ctx.textAlign="esquerda";
ctx.fillText("textAlign=esquerda",150,100);
ctx.textAlign="centro";
ctx.fillText("textAlign=centro",150,120);
ctx.textAlign="direita";
ctx.fillText("textAlign=direita",150,140);
sintaxe
contexto.textAlign="center|end|left|right|start";
valor do atributo
| valor | descrição |
|---|---|
| início | padrão. O texto começa na posição especificada. |
| fim | o texto termina na posição especificada. |
| centro | o centro do texto é colocado na posição especificada. |
| esquerda | alinhamento à esquerda do texto. |
| direita | alinhamento à direita do texto. |
detalhes técnicos
| valor padrão： | início |
|---|
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>.
