Manuel de référence HTML

Complète liste des balises HTML

Attribut textAlign de canvas HTML

textAlign est Canvas 2Description de l'API D pour dessiner du texte, l'attribut d'alignement du texte. Notez que cet alignement est basé sur CanvasRenderingContext2La valeur de x de la méthode D.fillText. Donc si textAlign="center", le texte sera dessiné à x-50%*largeur.

Guide de référence pour HTML canvas

Exemple en ligne

à la position150 créer une ligne rouge. Position150 est le point de position de tous les textes définis dans les exemples suivants. Étudiez l'effet de chaque valeur de l'attribut textAlign :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Utilisation de l'attribut textAlign du canvas HTML-Tutoriel de base(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="3" 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");
//à la position150 créer une ligne rouge
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";　　　　
//　indique les différentes valeurs de TextAlign
ctx.textAlign="start";　　　　　　
ctx.fillText("textAlign=start",150,60);　　　　　　　　
ctx.textAlign="end";　　　　　　
ctx.fillText("textAlign=end",150,80);　　　　　　　　　　　　　　　　　　
ctx.textAlign="left";　　　　　　
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";　　　　　
ctx.fillText("textAlign=center",150,120);　　　　　　　　　　　　　　
ctx.textAlign="right";　　　　　　
ctx.fillText("textAlign=right",150,140);
</script>
</body>
</html>

Voyons le test ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome et Safari prennent en charge textAlign attribut.

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

Définition et utilisation

Selon le point de repère, l'attribut textAlign définit ou retourne l'alignement actuel du contenu du texte.

Généralement, le texte commence à l'emplacement spécifié, mais si textAlign est réglé sur "droite" et le texte est placé à l'emplacement150, cela signifie que le texte devrait être à l'emplacement150 à la fin.

Avis :Utilisez fillText() oustrokeText() La méthode dessine et positionne effectivement le texte sur le canevas.

Valeur par défaut :	début
Grammaire JavaScript :	contexte.textAlign="center\|end\|left\|right\|start";

Valeur de l'attribut

Valeur	Description
début	par défaut. Le texte commence à l'emplacement spécifié.
fin	Le texte s'arrête à l'emplacement spécifié.
centre	Le centre du texte est placé à l'emplacement spécifié.
gauche	Le texte commence à l'emplacement spécifié.
droite	Le texte s'arrête à l'emplacement spécifié.

Guide de référence pour HTML canvas

HTML: <template> balise