Canvas textBaseline-eigenschap
Definitie en gebruik
Het textBaseline-eigenschap stelt in of retourneert de huidige tekstbaselinie bij het tekenen van tekst.
De onderstaande afbeelding toont de verschillende baselines die de textBaseline-eigenschap ondersteunt:}
Note:fillText() of strokeText() Bij het positioneren van tekst op het canvas, wordt de opgegeven textBaseline-waarde gebruikt.
Voorbeeld
Definieer een rechthoek die met blauw wordt gevuld:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Teken een blauwe lijn op positie y=100
ctx.strokeStyle="blauw";
ctx.moveTo(5, 100);
ctx.lineTo(395, 100);
ctx.stroke();
ctx.font="20px Arial"
//Plaats elke woord op verschillende textBaseline-waarden op y=200
ctx.textBaseline="bovenkant";
ctx.fillText("Bovenkant", 5, 100);
ctx.textBaseline="onderkant";
ctx.fillText("Onderkant", 50, 100);
ctx.textBaseline="midden";
ctx.fillText("Midden", 120, 100);
ctx.textBaseline="alfabetisch";
ctx.fillText("Alfabetisch", 190, 100);
ctx.textBaseline="hangend";
ctx.fillText("Hangend", 290, 100);
Syntax
context.textBaseline="alfabetisch|bovenkant|hangend|midden|ideografisch|onderkant";
Attribuutwaarde
| Waarde | Beschrijving |
|---|---|
| alfabetisch | Standaard. De tekstbaselijn is de gewone letterbaselijn. |
| bovenkant | De tekstbaselijn is het bovenste punt van het em-kader. |
| hangend | De tekstbaselijn is de hangende baselijn. |
| midden | De tekstbaselijn is het midden van het em-kader. |
| ideografisch | De tekstbaselijn is de betekenisbaselijn. |
| onderkant | De tekstbaselijn is het onderste punt van het em-kader. |
Technische details
| Standaardwaarde: | alfabetisch |
|---|
Browser support
The numbers in the table indicate the first browser version that fully supports this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
