HTML-canvas tekstBaseline- eigenschap
Voorbeeld
Teken een rode lijn op y=100 en plaats vervolgens elk woord op y=100 met verschillende textBaseline-waarden:
javascript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//Draw a red line at y = 100
ctx.strokeStyle = "red";
ctx.moveTo(5, 100);
ctx.lineTo(395, 100);
ctx.stroke();
ctx.font = "20px Arial"
//Place each word at y = 100 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);
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
| Property | |||||
|---|---|---|---|---|---|
| textBaseline | Yes | 9.0 | Yes | Yes | Yes |
Opmerking: de eigenschap textBaseline werkt in verschillende browsers anders, vooral bij gebruik van "hanging" of "ideographic".
Definitie en gebruik
Met de eigenschap textBaseline wordt de huidige tekstbasislijn ingesteld of geretourneerd die wordt gebruikt bij het tekenen van tekst.
De onderstaande afbeelding toont de verschillende basislijnen die worden ondersteund door het attribuut textBaseline:
Opmerking: De methoden fillText() en strokeText() gebruiken de opgegeven textBaseline-waarde bij het positioneren van de tekst op het canvas.
| Standaardwaarde: | alfabetisch |
|---|---|
| JavaScript-syntaxis: | context .textBaseline="alfabetisch|boven|hangend|midden|ideografisch|onder"; |
Eigendomswaarden
| Values | Description | Play it |
|---|---|---|
| alphabetic | Default. The text baseline is the normal alphabetic baseline | |
| top | The text baseline is the top of the em square | |
| hanging | The text baseline is the hanging baseline | |
| middle | The text baseline is the middle of the em square | |
| ideographic | The text baseline is the ideographic baseline | |
| bottom | The text baseline is the bottom of the bounding box |
❮ HTML Canvas-referentie