Canvas textAlign egenskab

Canvas referencemanual

Definition og brug

textAlign Egenskab baseret på anker, indstiller eller returnerer teksthøjdejusteringen for indholdets nuværende justering.

Normalt starter teksten fra den angivne position, men hvis du sætter textAlign="højre" og placerer teksten ved position 150, vil teksten afslutte ved position 150.

Tip:med fillText() eller strokeText() Metoder tegner faktisk tekst på canvas og placerer den.

Eksempel

Opret en rød linje ved position 150. Position 150 er ankerpunktet for alle de nævnte tekster nedenfor. Undersøg effekten af hver textAlign-værdi:

Din browser understøtter ikke canvas-tagget.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Opret en blå linje ved position 150
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Vis forskellige textAlign-værdier
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="venstre";
ctx.fillText("textAlign=venstre",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="højre";
ctx.fillText("textAlign=højre",150,140);

Prøv det selv

Syntaks

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

Attributvæ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.
venstre Tekst justeret til venstre.
højre Tekst justeret til højre.

Tekniske detaljer

Standardværdi: start

Browserstøtte

Tallene 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.

Canvas referencemanual