HTML propriété toile TextBaseline

Exemples

En y = 100 Tracez une ligne rouge, puis y = 100 Chu TextBaseline avec des valeurs différentes sont placées chaque mot:

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);

Essayez »

support du navigateur

Internet Explorer 9, Firefox, Opera, Chrome et Safari soutien propriété TextBaseline.

Remarque: TextBaseline attribut effets différents sur les différents navigateurs, en particulier l'utilisation de "suspendu" ou "idéographique" quand.

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

Définition et utilisation

ensembles de propriétés TextBaseline ou renvoie le texte lors de l'élaboration du courant de base de texte.

L'illustration suivante montre les lignes de base de TextBaseline attributs pris en charge:

Note: fillText () et strokeText () méthode sur la toile lorsque le texte de positionnement sera utilisé TextBaseline valeur spécifiée.

Par défaut:	alphabétique
Syntaxe JavaScript:	contexte .textBaseline = "alphabétique \| top \|suspendus \| milieu \| idéographique \| bottom";

Valeur de la propriété

值	描述
alphabetic	默认。文本基线是普通的字母基线。
top	文本基线是 em 方框的顶端。
hanging	文本基线是悬挂基线。
middle	文本基线是 em 方框的正中。
ideographic	文本基线是表意基线。
bottom	文本基线是 em 方框的底端。

HTML Manuel toile de référence

Précédent: HTML propriété toile textAlign