Canvas textBaseline egenskap

Canvas-referencehandbok

Definition och användning

textBaseline egenskapen anger eller returnerar den aktuella textbaslinjen vid ritning av text.

Följande illustration visar de olika baslinjer som textBaseline-attributet stöder:

文本基线图示

Kommentar:fillText() eller strokeText() När metoder används för att lokalisera text på canvas, kommer den specifika textbaslinjen att användas.

Exempel

Definiera en rektangel fylld med blått:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Rita en blå linje vid position y=100
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Placera varje ord vid y=200 med olika textBaseline-värden
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alfabetisk";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);

Prova själv

Syntaks

kontext.textBaseline="alfabetisk|top|hanging|middle|ideographic|bottom";

Attributvärde

Värde Beskrivning
alfabetisk Standard. Textbaslinjen är den vanliga bokstavslinjen.
top Textbaslinjen är toppen av em-rutnern.
hanging Textbaslinjen är hängande baslinje.
middle Textbaslinjen är mitt i em-rutnern.
ideographic Textbaslinjen är betydelsebaslinjen.
bottom Textbaslinjen är botten på em-rutnern.

Tekniska detaljer

Standardvärde: alfabetisk

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-referencehandbok