HTML canvas textAlign eigenschap
Definitie en gebruik
textAlign Eigenschappen stellen of retourneren de huidige uitlijning van de tekstinhoud op basis van de ankerpunt.
Normaal gesproken begint de tekst op de opgegeven positie, maar als u textAlign="right" instelt en de tekst op positie 150 plaatst, zal deze op positie 150 eindigen.
Tip:gebruik fillText() of strokeText() Methoden trekken tekst werkelijk op het canvas en plaatsen deze.
Voorbeeld
Maak een rode lijn op positie 150. Positie 150 is het ankerpunt voor alle hieronder gegeven voorbeelden. Onderzoek het effect van elke textAlign eigenschap:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 在位置 150 创建蓝线
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// 显示不同的 textAlign 值
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);
Syntax
context.textAlign="center|end|left|right|start";
Attribute value
| Value | Description |
|---|---|
| start | Default. Text starts at the specified position. |
| end | Text ends at the specified position. |
| center | The center of the text is placed at the specified position. |
| left | Text is aligned to the left. |
| right | Text is aligned to the right. |
Technical details
| Default value: | start |
|---|
Browser support
The numbers in the table indicate the first browser version that fully supports this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
