Resumo : neste tutorial, você aprenderá como usar o fillText()método JavaScript para desenhar uma string de texto em uma tela.
Introdução ao método JavaScript fillText()
Este fillText()é um método de contexto de desenho 2D. O fillText()método permite desenhar uma string de texto em uma coordenada com o preenchimento derivado do arquivo fillStyle.
O seguinte mostra a sintaxe do fillText()método:
ctx.fillText(text, y , y [, maxWidth])Linguagem de código: CSS ( css )O fillText()aceita os seguintes parâmetros:
texté a string de texto a ser desenhada.xeysão as coordenadas dos eixos xey do ponto em que o método começa a desenhar o texto.maxWidthé o número máximo de pixels de largura que o método renderizará o texto. Por padrão, a largura do texto não terá limite se você omitir omaxWidthargumento. Porém, se passar omaxWithvalor, o método tentará ajustar o kerning ou selecionar uma fonte mais condensada para o texto para que caiba na largura especificada.
Exemplo de JavaScript fillText()
Vejamos alguns exemplos de uso do fillText()método JavaScript.
1) Desenhe um exemplo de texto preenchido
Este exemplo desenha as palavras "Hello, Canvas!"em uma tela usando o fillText()método.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript fillText Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas id="canvas" height="400" width="500">
</canvas>
<script src="js/app.js"></script>
</body>
</html>Linguagem de código: HTML, XML ( xml )JavaScript
O seguinte mostra o código JavaScript que desenha o texto:
const canvas = document.getElementById('canvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.font = '60px san-serif';
ctx.fillText('Hello, Canvas!', 100, 200);
}Linguagem de código: JavaScript ( javascript )Saída:
Como funciona.
- Primeiro, selecione o elemento canvas usando o
querySelector()método. - Segundo, obtenha a referência ao contexto gráfico 2D da tela.
- Terceiro, defina a fonte para san-serif de 60 pixels de altura. e o estilo de preenchimento é verde.
- Por fim, desenhe o texto
'Hello, Canvas!'começando nas coordenadas(100,200).
2) Restrinja o tamanho do texto
O exemplo a seguir desenha as palavras 'Hello, Canvas!'com no máximo 250px.
HTML
<canvas id="canvas" height="400" width="500">
</canvas>
Linguagem de código: HTML, XML ( xml )JavaScript
const canvas = document.getElementById('canvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.font = '60px san-serif';
ctx.fillText('Hello, Canvas!', 100, 200, 250);
}Linguagem de código: JavaScript ( javascript )Saída:
Alinhamentos de texto
Para alinhar o texto na tela, você usa a textAlignpropriedade:
ctx.textAlign = value;O alinhamento é relativo ao xmétodo fillText().
Pode valueser um dos seguintes valores:
'left'– o texto está alinhado à esquerda.'right'– o texto está alinhado à direita.'center'– o texto está centralizado.'start'– o texto está alinhado no início da linha. Ele é alinhado à esquerda nas localidades da esquerda para a direita e alinhado à direita nas localidades da direita para a esquerda.'end'– o texto está alinhado no final da linha. Ele está alinhado à direita nas localidades da esquerda para a direita e alinhado à esquerda nas localidades da direita para a esquerda.
O valor padrão para texAligné start.
O exemplo a seguir demonstra as diversas opções da textAlignpropriedade:
HTML
<canvas id="canvas" height="350" width="500">
</canvas>
Linguagem de código: HTML, XML ( xml )JavaScript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const x = canvas.width / 2;
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
ctx.font = '25px san-serif';
ctx.textAlign = 'left';
ctx.fillText('left-aligned', x, 40);
ctx.textAlign = 'center';
ctx.fillText('center-aligned', x, 85);
ctx.textAlign = 'right';
ctx.fillText('right-aligned', x, 130);
// LTR locale
canvas.setAttribute('dir', 'ltr');
ctx.textAlign = 'start';
ctx.fillText('start', x, 175);
ctx.textAlign = 'end';
ctx.fillText('end', x, 220);
// RTL locale
canvas.setAttribute('dir', 'rtl');
ctx.textAlign = 'start';
ctx.fillText('start', x, 265);
ctx.textAlign = 'end';
ctx.fillText('end', x, 305);Linguagem de código: JavaScript ( javascript )Para alterar o código do idioma para LTR ou RTL, defina o dirvalor do atributo da tela como 'ltr'e 'rtl'.
Aqui está a saída:
Linha de base do texto
Para especificar a linha de base do texto do desenho, você usa a textBaselinepropriedade do contexto do desenho 2D:
ctx.textBaseline = value;O valor de the textBaselinepode ser um dos seguintes valores:
'top'– a linha de base do texto é o topo do quadrado em.'hanging'– a linha de base do texto é a linha de base suspensa.'middle'– a linha de base do texto está no meio do quadrado em.'alphabetic'– a linha de base do texto é a linha de base alfabética. Este é o valor padrão.'ideographic'– a linha de base do texto é ideográfica. É usado principalmente por scripts chineses, japoneses e coreanos.'bottom'– a linha de base do texto é a parte inferior da caixa delimitadora.
Exemplo de linha de base de texto
O exemplo a seguir ilustra vários textBaselinevalores.
HTML
<canvas id="canvas" width="550" height="500"></canvas>
Linguagem de código: HTML, XML ( xml )JavaScript
const canvas = document.getElementById('canvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
const str = 'The quick brown fox jumps over the lazy dog';
ctx.font = '20px san-serif';
ctx.strokeStyle = 'red';
baselines.forEach((baseline, index) => {
// set the text baseline
ctx.textBaseline = baseline;
const y = 75 + index * 75;
// draw a line
ctx.beginPath();
ctx.moveTo(0, y + 0.5);
ctx.lineTo(500, y + 0.5);
ctx.stroke();
// draw the text
ctx.fillText(`${str}(${baseline})`, 0, y);
});
}Linguagem de código: JavaScript ( javascript )Saída:
Resumo
- Use o JavaScript
fillText()para desenhar uma string de texto em uma coordenada para uma tela. - Use as propriedades
font,textAlignetextBaselinepara definir as opções de desenho de texto.
