Canvas textBaseline egenskab

Canvas referencer

Definition og brug

textBaseline egenskaben indstiller eller returnerer den aktuelle tekstbaselinje ved tegning af tekst.

Følgende illustration viser de forskellige baselines, som textBaseline-egenskaben understøtter:

文本基线图示

Bemærk:fillText() eller strokeText() Når metoder bruges til at positionere tekst på canvas, vil de bruge den angivne textBaseline-værdi.

eksempel

Definer et rektangel fyldt med blå farve:

Din browser understøtter ikke canvas-tagen.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Tegn en blå linje på position y=100
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Placer hver ord med forskellige textBaseline-værdier på y=200
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bunden";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);

prøv det selv

syntaks

kontekst.textBaseline="alphabetic|top|hanging|middle|ideographic|bunden";

egenskabsværdi

værdi beskrivelse
alphabetic standard. Tekstbunden er den almindelige bogstavelige bundlinje.
toppen tekstbunden er toppunktet af em-boksen.
hanging tekstbunden er den hævende bundlinje.
midten tekstbunden er midtpunktet af em-boksen.
ideographic tekstbunden er den betydende bundlinje.
bunden tekstbunden er bunden af em-boksen.

tekniske detaljer

standardværdi: alphabetic

Browsertilstand

Tal i tabellen angiver den første browserversion, der fuldt ud understøtter denne egenskab.

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 referencer