HTML canvas textBaseline-eigenschap
Definitie en gebruik
De textBaseline-eigenschap stelt of keert de huidige tekstbaslijn in bij het tekenen van tekst in.
Hieronder wordt gedemonstreerd welke baslijnen de textBaseline-eigenschap ondersteunt:
Opmerking:fillText() of strokeText() Wanneer een methode tekst positioneert op het canvas, wordt de opgegeven textBaseline-waarde gebruikt.
Voorbeeld
Definieer een rechthoek met blauwe vulling:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Draw a blue line at position y=100
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//In y=200 place each word with different textBaseline values
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="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);
语法
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
Eigenschapswaarde
| Waarde | Beschrijving |
|---|---|
| alphabetic | Standaard. De tekstbasislijn is de gewone letterbasislijn. |
| top | De tekstbasislijn is het bovenste deel van het em-kader. |
| hanging | De tekstbasislijn is de��挂基线。 |
| middle | De tekstbasislijn is het midden van het em-kader. |
| ideographic | De tekstbasislijn is de ideografische basislijn. |
| bottom | De tekstbasislijn is het onderste deel van de em-kader. |
Technische details
| Standaardwaarde: | alphabetic |
|---|
Browserondersteuning
De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Opmerking:Internet Explorer 8 en oudere versies ondersteunen geen <canvas> element.
