Propriété HTML canvas textBaseline
Exemple
Tracez une ligne rouge à y=100, puis placez chaque mot à y=100 avec différentes valeurs textBaseline :
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);
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
| Property | |||||
|---|---|---|---|---|---|
| textBaseline | Yes | 9.0 | Yes | Yes | Yes |
Remarque : La propriété textBaseline fonctionne différemment selon les navigateurs, en particulier lors de l'utilisation de "hanging" ou "ideographic".
Définition et utilisation
La propriété textBaseline définit ou renvoie la ligne de base du texte actuelle utilisée lors du dessin du texte.
L'illustration ci-dessous montre les différentes lignes de base prises en charge par l'attribut textBaseline :
Remarque : Les méthodes fillText() et strokeText() utiliseront la valeur textBaseline spécifiée lors du positionnement du texte sur le canevas.
| Valeur par défaut: | alphabétique |
|---|---|
| Syntaxe JavaScript : | context .textBaseline="alphabétique|haut|suspendu|milieu|idéographique|bas" ; |
Valeurs de propriété
| 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 |
❮ Référence de canevas HTML