Canvas textAlign eigenschap

Canvas reference manual

Definitie en gebruik

textAlign Eigenschappen volgens anker, instellen of retourneren van de huidige uitlijning van de tekstinhoud.

Normaal gesproken begint de tekst op de opgegeven positie, maar als u textAlign="right" instelt en de tekst op positie 150 plaatst, eindigt de tekst op positie 150.

Tip:gebruik fillText() of strokeText() Methoden tekenen en positioneren tekst echt op het canvas.

Voorbeeld

Maak een rode lijn op positie 150. Positie 150 is het ankerpunt voor alle tekst in het volgende voorbeeld. Onderzoek het effect van elke textAlign-waarde:

Uw browser ondersteunt de canvas-tag niet.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Maak een blauwe lijn op positie 150
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Toon verschillende textAlign-waarden
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);

Probeer het zelf uit

Syntax

context.textAlign="center|end|left|right|start";

Eigenschapswaarde

Waarde Beschrijving
start Standaard. Tekst begint op de opgegeven positie.
end Tekst eindigt op de opgegeven positie.
center Het midden van de tekst wordt geplaatst op de opgegeven positie.
left Tekst is links uitgelijnd.
right Tekst is rechts uitgelijnd.

Technische details

Standaardwaarde: 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.

Canvas reference manual