Propriété textBaselinedu canvas HTML

HTML canvas 参考手册Manuel de référence HTML canvas

Exemple

Tracez une ligne rouge à y=100, puis placez chaque mot à y=100 en utilisant une valeur textBaseline différente :

Votre navigateur ne prend pas en charge la balise canvas HTML5.

JavaScript :

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

//Tracez une ligne rouge à y=100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();

ctx.font="20px Arial"

//Placez chaque mot à y=100 avec différentes valeurs de textBaseline
ctx.textBaseline="top";
ctx.fillText("Haut",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bas",50,100);
ctx.textBaseline="middle";
ctx.fillText("Milieu",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabétique",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Suspendu",290,100);

Essayez-le vous-même »

Prise en charge des navigateurs

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge la propriété textBaseline.

Remarque :La propriété textBaseline se comporte différemment selon les navigateurs, en particulier lors de l'utilisation de "hanging" ou "ideographic".

Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La propriété textBaseline définit ou renvoie la ligne de base actuelle du texte utilisée lors du dessin de texte.

Le diagramme suivant illustre les différentes lignes de base prises en charge par la propriété textBaseline :

textBaseline illustration

Remarque :fillText()etstrokeText()Lors du positionnement du texte sur le canvas, la méthode utilisera la valeur textBaseline spécifiée.

Valeur par défaut : alphabetic
Syntaxe JavaScript : context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

Valeurs de propriété

Valeur Description
alphabetic Par défaut. La ligne de base du texte est la ligne de base alphabétique normale.
top La ligne de base du texte est le haut du carré em.
hanging La ligne de base du texte est la ligne de base hanging.
middle La ligne de base du texte est le milieu du carré 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 carré em.

HTML canvas 参考手册Manuel de référence HTML canvas Autres extensions