Manual de referência HTML

大全 de etiquetas HTML

Propriedade textBaseline do HTML canvas

textBaseline é Canvas 2A propriedade textBaseline é descrita pelo D API ao desenhar texto, a linha de base atual do texto.

Manual de referência do canvas HTML

Exemplo online

Em y = 100 desenhar uma linha vermelha, em seguida, cada palavra em y = 100 localizar diferentes valores de textBaseline:

Exemplo

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso da propriedade textBaseline no HTML canvas-Tutorial Básico(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="4" altura="2" estilo="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");
//em Y　=　100 desenha uma linha vermelha
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px　Arial"
//Cada uma em y　=　10A palavra 0 tem diferentes valores de textBaseline
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);　
</script>
</body>
</html>

Teste e veja ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome e Safari suportam textBaseline propriedade.

Atenção:A propriedade textBaseline tem efeitos diferentes em diferentes navegadores, especialmente quando usado "hanging" ou "ideographic".

Atenção:Internet Explorer 8 Versões anteriores ao <canvas> não suportam.

Definição e uso

A propriedade textBaseline define ou retorna a linha de texto atual usada para desenhar o texto.

A seguir, a ilustração demonstra os tipos de linhas de texto suportadas pela propriedade textBaseline:

Atenção:fillText() estrokeText() O método usa o valor textBaseline especificado para localizar o texto na tela.

Valor padrão:	alphabetic
Sintaxe JavaScript:	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 comum.
top	A linha de texto é o topo da caixa em em.
hanging	A linha de texto é a linha suspensa.
middle	A linha de texto é o meio da caixa em em.
ideographic	A linha de texto é a linha semântica.
bottom	A linha de texto é o fundo da caixa em em.

Manual de referência do canvas HTML

HTML: <template> tag