HTML5 Desenhar texto no Canvas

HTML5 O Canvas pode usar várias fontes, tamanhos e cores no HTML5Desenhar texto no canvas, a aparência do texto é controlada por esses2A propriedade Context font controla, para desenhar texto, use a função fillText() ou strokeText().

Exemplo online

Você pode usar várias fontes, tamanhos e cores no HTML5Desenhar texto no canvas.
A aparência do texto é controlada por esses2A propriedade Context font controla. Além disso, você precisa configurar fillStyle ou strokeStyle dependendo se você deseja desenhar texto preenchido ou desenhado2A propriedade Context D.
Para desenhar texto, use a função fillText() ou strokeText()
Este é um exemplo de código simples:

<canvas id="ex1" width="500" height="100" style="border:　1px sólido #cccccc;">
　　　　HTML5　Canvas não suportado
</canvas>
<script>
　　　var canvas = document.getElementById("ex1");
　　　var context = canvas.getContext("2d);
　　　context.font = ""36px Verdana";
　　　context.fillStyle = "#000000";
　　　context.fillText("HTML",5　Canvas Text　50,　50);
　　　context.font = "normal"　36px Arial";
　　　context.strokeStyle = "#000000";
　　　context.strokeText("HTML5　Canvas Text　50,　90);
　</script>

context.strokeText("HTML"

Este é o resultado ao desenhar no canvas:

fonte e estilo5no HTML2O valor da propriedade font do contexto Déve ser configurado ao desenhar texto no canvas. Isso é feito ajustando

[estilo da fonte][peso da fonte][tamanho da fonte][fonte]

Por exemplo

context.font = "normal normal"　20px Verdana";

Você pode definir os seguintes valores para cada parte da string de fonte:

Atenção, não todos os navegadores suportam todos os valores. Antes de dependê-los, você precisará testar os valores planejados.
Este é outro exemplo:

"italic bold"　36px Arial"

desenho de texto

Como mencionado anteriormente, no HTML5Ao desenhar texto no canvas, você pode desenhar texto preenchido ou texto contorno. Você pode usar2As funções Dcontext.fillText() e strokeText(). Sua definição é a seguinte:

fillText(textString, x, y[, maxWidth]);
strokeText(textString, x, y[, maxWidth]);

O parâmetro textString é o texto a ser desenhado.
O x e y representam as posições obtidas no texto. O parâmetro x é onde o texto começa. O parâmetro y é a posição vertical do texto, mas a forma exata depende da linha de base. A linha de base será explicada em partes posteriores.
O texto maxWidth é coberto na parte inferior.
Este é um exemplo de código:

context.font = ""36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML",5　Canvas Text　50,　50);

largura máxima do texto

parâmetro maxWidth informa ao canvas que o texto não pode ocupar mais espaço horizontalmente do que o valor especificado. Se o texto for muito largo e não couber no maxWidth, sua largura será comprimida. Ele não será cortado. Este é um exemplo de código de texto desenhado com e sem maxWidth:

context.font = ""36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML",5　Canvas Text　50,　50);
context.fillText("HTML",5　Canvas Text　50,　100,　200);

这是在HTML5画布上绘制时这两个文本的外观:

如您所见，第二个文本的宽度被压缩以适合maxWidth 200个像素.

文字颜色

像其他任何形状一样，使用2D上下文的fillStyle和 strokeStyle属性设置填充或描边文本的颜色。在这里，我不会更详细地介绍这些属性。有关 更多详细信息，请参见描边和填充。

测量文字宽度

2D上下文对象具有可以测量文本像素宽度的功能。它无法测量高度。该函数称为measureText()。这是一个代码示例:

var textMetrics = context.measureText("measure this");
var width = textMetrics.width;

测量文本的宽度可用于计算文本字符串是否适合特定空间等。

文字基线

文本基线确定如何解释和 的y参数。换句话说，垂直放置文本的位置以及该位置的解释方式。请注意，浏览器在解释此属性的方式上也可能会有细微的差异。 fillText()strokeText()
使用textBaseline2D上下文的属性设置文本基线。以下是它可以采用的值及其含义:

这是一个示例，该示例y对所有文本使用相同的值（75）绘制文本，但对所绘制的每个文本使用不同的基线。绘制一条线y=75，向您展示如何围绕该y值设置文本基线。

以下是生成上述图形的代码:

context.strokeStyle = "#000000";
context.lineWidth =　1;
context.beginPath();
context.moveTo( 0,　75);
context.lineTo(500,　75);
context.stroke();
context.closePath();
context.font = ""16px Verdana";
context.fillStyle = "#000000";
context.textBaseline = "top";
context.fillText("top", 0,　75);
context.textBaseline = "hanging";
context.fillText("hanging",　40,　75);
context.textBaseline = "middle";
context.fillText("meio",　120,　75);
context.textBaseline = "alfabético";
context.fillText("alfabético",　200,　75);
context.textBaseline = "ideoográfico";
context.fillText("ideoográfico",　300,　75);
context.textBaseline = "inferior";
context.fillText("inferior",-glyph",　400,　75);

Alinhamento de texto

2A propriedade textAlign do contexto define como o texto se alinha horizontalmente ao ser desenhado. Em outras palavras, a propriedade textAlign define o coordenada x onde o texto é desenhado.

A seguir, alguns exemplos que mostram como a propriedade textAlign funciona. A linha vertical é desenhada no x = 250. Todos os textos também são desenhados com x = 250, mas o valor da propriedade textAlign é diferente.

Este é um exemplo de código gráfico:

<canvas id="ex4" width="500" height="120" style="border:　1px sólido #cccccc;">
　　　　HTML5　Canvas não suportado
</canvas>
<script>
var canvas = document.getElementById("ex4");
var context = canvas.getContext("2d);
context.strokeStyle = "#000000";
context.lineWidth =　1;
context.beginPath();
context.moveTo(　250, 0);
context.lineTo(　250,　250);
context.stroke();
context.closePath();
context.font = ""16px Verdana";
context.fillStyle = "#000000";
context.textAlign = "center";
context.fillText("center",　250,　20);
context.textAlign = "start";
context.fillText("start",　250,　40);
context.textAlign = "end";
context.fillText("end",　250,　60);
context.textAlign = "left";
context.fillText("left",　250,　80);
context.textAlign = "right";
context.fillText("right",　250,　100);
</script>

O resultado da execução do código é o seguinte: