HTML Reference Manual

Complete List of HTML Tags

Método strokeText() do HTML canvas

strokeText() é um método do Canvas 2O método D API desenha texto em uma posição (x, y) específica no canvas. Se fornecido um quarto parâmetro representando o valor máximo, o texto será escalado para se adaptar à largura.

Manual de referência do canvas HTML

Exemplo online

Usar strokeText() para escrever o texto "Base Tutorial Site!" e "pt.oldtoolbag.com!" (com gradiente):

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso do método strokeText() no HTML canvas-Tutorial básico(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.strokeText("Base Tutorial Site!",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.strokeStyle=gradient;
ctx.strokeText("pt.oldtoolbag.com!10,90);
</script>
</body>
</html>

Teste e veja ‹/›

Compatibilidade do navegador

IEFirefoxÓperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome e Safari suportam strokeText() 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 strokeText() desenha texto no canvas (sem preenchimento). A cor padrão do texto é preta.

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

Sintaxe JavaScript:	context.strokeText(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 da 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> etiqueta