L'attribut textBaseline de Canvas
Définition et utilisation
L'attribut textBaseline définit ou retourne la ligne de base actuelle pour le texte lors du dessin.
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 méthode utilise la valeur de textBaseline spécifié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);
syntaxe
contexte.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 des lettres ordinaires. |
| top | La ligne de base du texte est le sommet du cadre em. |
| hanging | La ligne de base du texte est la ligne suspendue. |
| middle | La ligne de base du texte est le milieu du cadre em. |
| ideographic | La ligne de base du texte est la ligne idéographique. |
| bottom | La ligne de base du texte est le bas du cadre em. |
détails techniques
| valeur par défaut : | alphabetic |
|---|
Compatibilité des navigateurs
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>.
