HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML canvas textAlign Eigenschaft

textAlign ist Canvas 2Beschreibung der D API, wenn der Text gezeichnet wird, die Eigenschaft der Ausrichtung des Textes. Beachten Sie, dass diese Ausrichtung basiert auf CanvasRenderingContext2Der Wert von x der Methode fillText. Daher wird der Text gezeichnet, wenn textAlign="center"-50%*Breite.

HTML canvas Reference Manual

Online-Beispiel

an Position150zeichnen Sie eine rote Linie. Position150ist der Positionsbezug für alle Texte, die in den folgenden Beispielen definiert sind. Untersuchen Sie die Wirkung jeder textAlign-Eigenschaftswert:

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Verwendung der textAlign-Eigenschaft in HTML canvas-Grund教程(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="3" height="2" style="border:1px fest #d3d3d3>
Ihr Browser unterstützt keine HTML5　canvas-Tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//an Position150erstellen Sie eine rote Linie
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";　　　　
//　zeigt verschiedene textAlign-Werte an
ctx.textAlign="start";　　　　　　
ctx.fillText("textAlign=start",150,60);　　　　　　　　
ctx.textAlign="end";　　　　　　
ctx.fillText("textAlign=end",150,80);　　　　　　　　　　　　　　　　　　
ctx.textAlign="left";　　　　　　
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";　　　　　
ctx.fillText("textAlign=center",150,120);　　　　　　　　　　　　　　
ctx.textAlign="right";　　　　　　
ctx.fillText("textAlign=right",150,140);
</script>
</body>
</html>

Testen Sie und sehen Sie ‹/›

Browserkompatibilität

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome und Safari unterstützen textAlign Property.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and Usage

The textAlign property sets or returns the current alignment of the text content based on the positioning point.

通常，文本将在指定的位置开始，但是，如果设置textAlign =“ right”并将文本放置在位置150 means that the text should be at position150 ends.

Hint:Use fillText() orstrokeText() The method actually draws and locates text on the canvas.

Default Value:	start
JavaScript Syntax:	context.textAlign="center\|end\|left\|right\|start";

Attribute Value

Value	Description
start	Default. The text starts at the specified position.
end	The text ends at the specified position.
center	The center of the text is placed at the specified position.
left	The text starts at the specified position.
right	The text ends at the specified position.

HTML canvas Reference Manual

HTML: <template> Tag