HTML Manuel de référence

Tous les balises HTML

HTML canvas textBaseline attribut

textBaseline est Canvas 2D API Description de l'attribut de la ligne de base du texte actuel lors du dessin du texte.

Exemple en ligne

Dans y = 100 dessiner une ligne rouge, puis chaque mot dans y = 100 placement de différentes valeurs de textBaseline :

Exemple

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Utilisation de l'attribut textBaseline de HTML canvas-Tutoriel de base(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="4" height="2" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　balise canvas.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
//à Y　=　100 trace une ligne rouge
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Chaque élément en y　=　10Les mots "0" ont des valeurs textBaseline différentes
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);　
</script>
</body>
</html>

Testez pour voir ‹/›

Compatibilité des navigateurs

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome et Safari supportent textBaseline propriété.

Attention :La propriété textBaseline fonctionne différemment sur différents navigateurs, en particulier lorsqu'elle utilise "hanging" ou "ideographic".

Attention :Internet Explorer 8 Les versions précédentes de et avant ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

L'attribut textBaseline définit ou retourne la ligne de base actuelle utilisée pour dessiner le texte.

Les illustrations suivantes montrent les différentes lignes de base prises en charge par l'attribut textBaseline :

Attention :fillText() etstrokeText() Lorsque la méthode place du texte sur le canevas, elle utilise la valeur de textBaseline spécifiée.

Valeur par défaut :	alphabetic
Syntaxe JavaScript :	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.

Guide de référence HTML canvas

HTML: <template> balise