Canvas textAlign egenskap

Canvas referenshandbok

Definition och användning

textAlign Egenskapen baseras på anker, ställer in eller returnerar textinnehållets nuvarande justeringsstil.

Vanligtvis börjar texten vid den specificerade positionen, men om du sätter textAlign="right" och placerar texten vid position 150, kommer texten att sluta vid position 150.

Tips:med fillText() eller strokeText() Metoder ritas faktiskt på canvas och positioneras.

Exempel

Skapa en röd linje vid position 150. Position 150 är ankarpunkten för alla textexempel nedan. Utforska effekten av olika textAlign-värden:

Din webbläsare stöder inte canvas-taggen.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Skapa en blå linje vid position 150
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Visa olika textAlign-värden
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);

Prova själv

Syntax

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

Egenskapsvärde

Värde Beskrivning
start Förvalt. Texten börjar på den specificerade positionen.
slut Texten slutar på den specificerade positionen.
mitt Textens mitt placeras på den specificerade positionen.
vänster Texten är vänsterjusterad.
höger Texten är högerjusterad.

Tekniska detaljer

Förvalt värde: start

Webbläsarstöd

Tal i tabellen anger den första webbläsarversionen som helt stöder detta egenskap.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Kommentar:Internet Explorer 8 och tidigare versioner stöder inte <canvas>-elementet.

Canvas referenshandbok