Manual de Referência HTML

大全 de tags HTML

Propriedade textAlign do canvas HTML

textAlign é Canvas 2Descrição da API D ao desenhar texto, o atributo de alinhamento do texto. Note que este alinhamento é baseado no CanvasRenderingContext2O valor de x do método fillText. Portanto, se textAlign="center", o texto será desenhado em x-50%*largura.

Manual de referência do canvas HTML

Exemplo online

na posição150 crie uma linha vermelha. Localização150 é o ponto de localização de todos os textos definidos neste exemplo. Estude o efeito de cada valor de textAlign:

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uso do atributo textAlign do HTML canvas-Tutorial básico(w3(codebox.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="3" height="2" style="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//na posição150 crie uma linha vermelha
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";　　　　
//　indica diferentes valores de TextAlign
ctx.textAlign="start";　　　　　　
ctx.fillText("textAlign=start",150,60);　　　　　　　　
ctx.textAlign="end";　　　　　　
ctx.fillText("textAlign=end",150,80);　　　　　　　　　　　　　　　　　　
ctx.textAlign="left";　　　　　　
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";　　　　　
ctx.fillText("textAlign=center",150,120);　　　　　　　　　　　　　　
ctx.textAlign="right";　　　　　　
ctx.fillText("textAlign=right",150,140);
</script>
</body>
</html>

Teste e veja ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome e Safari suportam textAlign propriedade.

Atenção:Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.

Definição e uso

De acordo com o ponto de localização, a propriedade textAlign define ou retorna o alinhamento atual do conteúdo do texto.

Normalmente, o texto começa no local especificado, mas se textAlign = "direita" e o texto for colocado na posição150 significa que o texto deve estar na posição150 termina.

Dica:Use fillText() oustrokeText() O método desenha e localiza o texto no canvas.

Valor padrão:	início
Sintaxe JavaScript:	contexto.textAlign="center\|end\|left\|right\|start";

Valor do atributo

Valor	Descrição
início	Padrão. O texto começa no local especificado.
fim	O texto termina no local especificado.
centro	O centro do texto é colocado no local especificado.
esquerda	O texto começa no local especificado.
direita	O texto termina no local especificado.

Manual de referência do canvas HTML

HTML: <template> etiqueta