Manual de referência HTML

大全 de etiquetas HTML

Método fillText() do HTML canvas

fillText() é um método do Canvas 2Método D API para preencher texto em uma posição (x, y). Se o quarto parâmetro for fornecido, o texto será escalado para se adaptar ao largura máxima.

Manual de referência do canvas HTML

Exemplo online

Use fillText(), escreva texto "site de tutoriais básicos!" e "oldtoolbag.com!":

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso do método fillText() no HTML canvas-Tutoriais básicos(oldtoolbag.com)</title>/<title>
</<head>
<body>
<canvas id="myCanvas" width="300" altura="150" estilo="borda:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("site de tutoriais básicos!",10,50);
ctx.font="30px Verdana";
//　Criar uma gradiente
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","azul");
gradient.addColorStop("1.0","vermelho");
//　Preencher uma gradiente
ctx.fillStyle=gradient;
ctx.fillText("w"3codebox.com!10,90);
</script>
</body>
</html>

Teste e veja ‹/›

Compatibilidade do navegador

IEFirefoxÓperaChromeSafari

Internet Explorer 9e Firefox, Opera, Chrome e Safari suportam fillText() Método.

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

Atenção:O Safari não suporta o parâmetro maxWidth.

Definição e uso

O método fillText() desenha texto preenchido no canvas. A cor padrão do texto é preta (#000000).

Dica:Use font Propriedade para definir o tipo de letra e o tamanho, e usar fillStyle Propriedade com outra cor/Renderizar texto com gradiente.

Sintaxe JavaScript:	context.fillText(text,x,y,maxWidth);

Valor do parâmetro

Parâmetro	Descrição
text	Texto a ser exibido no canvas.
x	Posição x do início do desenho do texto (relativa ao canvas).
y	Posição y do início do desenho do texto (relativa ao canvas).
maxWidth	Opcional. Largura máxima do texto permitida, em pixels.

Manual de referência do canvas HTML

HTML: <template> tag