HTML-Leinwand align Eigenschaft
Beispiele
Erstellen Sie eine rote Linie an Position 150. Position 150 ist in den folgenden Beispielen alle den Ankertext definiert. Bitte studieren Sie die Wirkung der einzelnen align Eigenschaftswerte:
JavaScript:
var ctx=c.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Show the different textAlign values
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);
Versuchen »
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen align Eigenschaft.
Hinweis: 8 und frühere Versionen von Internet Explorer unterstützt nicht das <canvas> -Element.
Definition und Verwendung
align Attribute als Ankersätze oder gibt den Textinhalt der aktuellen Ausrichtung.
Typischerweisebeginnt der Text ander angegebenen Stelle, aber wenn man die align = "right" gesetzt , und der Text auf die Position 150 platziert ist, die Position 150 amEnde.
Tipp: Verwenden Sie fillText () oder strokeText () Methode , um tatsächlich zu ziehen und den Text auf der Leinwand zu positionieren.
| Standard: | Start |
|---|---|
| JavaScript-Syntax: | Kontext .textAlign = "center | Ende |left | right | start"; |
Eigenschaft Wert
| 值 | 描述 |
|---|---|
| start | 默认。文本在指定的位置开始。 |
| end | 文本在指定的位置结束。 |
| center | 文本的中心被放置在指定的位置。 |
| left | 文本在指定的位置开始。 |
| right | 文本在指定的位置结束。 |