HTML5 Canvas Text zeichnen

HTML5 Canvas kann verschiedene Schriftarten, Größen und Farben in HTML verwenden5Text auf der Leinwand zeichnen, das Aussehen des Textes wird durch diese2D Context font-Eigenschaft kontrolliert, um Text zu zeichnen, verwenden Sie die Funktionen fillText() oder strokeText().

Online-Beispiel

Man kann verschiedene Schriftarten, Größen und Farben in HTML verwenden5Text auf der Leinwand zeichnen.
Das Aussehen des Textes wird durch diese2D Context font-Eigenschaft kontrolliert. Darüber hinaus müssen Sie festlegen, ob Sie gefüllten Text oder Text mit Umrandung zeichnen möchten, indem Sie fillStyle oder strokeStyle einstellen2D Context-Eigenschaft.
Um Text zu zeichnen, verwenden Sie die Funktionen fillText() oder strokeText()
Dies ist ein einfaches Codebeispiel:

<canvas id="ex1" width="500" height="100" style="border:　1px fest #cccccc;">
　　　　HTML5　Canvas wird nicht unterstützt
</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("HTML"5　Canvas Text　50,　90);
　</script>

这是在画布上绘制时的结果:

字体和样式

在HTML5在画布上绘制文本时，必须设置要使用的字体。这是通过设置2D上下文font属性的值来完成的。此属性是具有CSS兼容值的字符串，其格式为:

[font　style][font　weight][font　size][font　face]

例如

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

您可以为字体字符串的每个部分设置以下值:

请注意，并非每个浏览器都支持所有值。在依赖它们之前，您将必须测试计划使用的值。
这是另一个示例:

"italic　bold"　36px　Arial"

绘图文字

如前所述，在HTML5在画布上绘制文本时，您可以绘制填充文本或轮廓文本。您可以使用2D上下文函数fillText()和进行操作strokeText()。这些函数的定义如下:

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

该textString参数是绘制文本。
在x和y代表在文字中得出的位置。该x参数是文本开始的地方。该y参数是文本垂直放置的位置，但是确切的表示方式取决于文本基线。文本基线将在后面的部分中介绍。
该maxWidth文本被覆盖在下面的部分。
这是一个代码示例:

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

文字最大宽度

可选的maxWidth参数告诉画布，文本在水平方向上不能比给定参数值占用更多空间。如果文字太宽而无法容纳maxWidth，则文字的宽度将被压缩。它不会被切断。这是一个使用和不使用绘制相同文本的代码示例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("middle"　120,　75);
context.textBaseline = "alphabetic";
context.fillText("alphabetic",　200,　75);
context.textBaseline = "ideographic";
context.fillText("ideographic",　300,　75);
context.textBaseline = "bottom";
context.fillText("bottom-glyph",　400,　75);

Textausrichtung

2Die textAlign-Eigenschaft des Textkontexts definiert, wie der Text horizontal ausgerichtet wird. Mit anderen Worten, die textAlign-Eigenschaft definiert die x-Koordinate, an der der Text gezeichnet wird.

Nachfolgend einige Beispiele, die die Funktionsweise des Attributs textAlign zeigen. Die senkrechten Linien werden an der Stelle x = 250. Alle Texte werden ebenfalls mit x = 250, aber der Wert der Eigenschaft textAlign ist unterschiedlich.

Dies ist ein Beispielcode für das Zeichnen von Grafiken:

<canvas id="ex4" width="500" height="120" style="border:　1px fest #cccccc;">
　　　　HTML5　Canvas wird nicht unterstützt
</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>

Der Ausgabefehler des Codes ist wie folgt: