HTML canvas textAlign egenskab
Definition og brug
textAlign Egenskaben sætter eller returnerer den nuværende justering af tekstindholdets position baseret på ankerpunktet.
Normalt starter teksten fra den angivne position, men hvis du sætter textAlign="right" og placerer teksten ved position 150, vil teksten ende ved position 150.
Vedvarende:bruges med fillText() eller strokeText() Metoder tegner og positionerer tekst faktisk på canvas.
Eksempel
Opret en rød linje ved position 150. Position 150 er ankerpunktet for alle tekster defineret i nedenstående eksempel. Undersøg effekten af hver textAlign-værdi:
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);
Syntaks
context.textAlign="center|end|left|right|start";
Egenskabsværdi
| Værdi | Beskrivelse |
|---|---|
| start | Standard. Teksten starter på den angivne position. |
| end | Teksten slutter på den angivne position. |
| center | Tekstens center placeres på den angivne position. |
| left | Tekst justeret til venstre. |
| right | Tekst justeret til højre. |
Tekniske detaljer
| Standardværdi: | start |
|---|
Browserunderstøttelse
Tal i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Bemærk:Internet Explorer 8 og tidligere versioner understøtter ikke <canvas>-elementet.
