Attribut textBaseline canvas HTML
Définition et utilisation
L'attribut textBaseline définit ou retourne la ligne de base actuelle utilisée pour dessiner le texte.
L'image suivante montre les différentes lignes de base prises en charge par l'attribut textBaseline :
Remarque :fillText() ou strokeText() Lorsque le texte est positionné sur le canevas, la valeur de textBaseline spécifiée sera utilisée.
Exemple
Définir un rectangle rempli de bleu :
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Dessiner une ligne bleue à la position y=100
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Placer chaque mot avec différentes valeurs de textBaseline à y=200
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);
grammaire
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
Valeur de l'attribut
| Valeur | Description |
|---|---|
| alphabetic | Par défaut. La ligne de base du texte est la ligne de base ordinaire des lettres. |
| top | La ligne de base du texte est le sommet du cadre em. |
| hanging | La ligne de base du texte est la ligne de base suspendue. |
| middle | La ligne de base du texte est le milieu du cadre em. |
| ideographic | La ligne de base du texte est la ligne de base idéographique. |
| bottom | La ligne de base du texte est le bas du cadre em. |
Détails techniques
| Valeur par défaut : | alphabetic |
|---|
Prise en charge du navigateur
Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.
