HTML5 Dessiner du texte sur le Canvas

HTML5 Canvas peut utiliser diverses polices, tailles et couleurs dans HTML5Tracez du texte sur le canevas, l'apparence du texte est déterminée par ces2D Propriété font Context. Pour dessiner du texte, utilisez les fonctions fillText() ou strokeText().

Exemple en ligne

Vous pouvez utiliser diverses polices, tailles et couleurs dans HTML5Tracez du texte sur le canevas.
L'apparence du texte est déterminée par ces2D Propriété font Context. De plus, vous devez configurer fillStyle ou strokeStyle en fonction du texte à dessiner2D Propriété Context.
Pour dessiner du texte, utilisez les fonctions fillText() ou strokeText()
Ceci est un exemple de code simple:

<canvas id="ex1" width="500" height="100" style="border:　1px solide #cccccc;">
　　　　HTML5　Canvas non pris en charge
</canvas>
<script>
　　　var canvas = document.getElementById("ex1");
　　　var context = canvas.getContext("2d")
　　　context.font = ""36px Verdana";
　　　context.fillStyle = "#000000";
　　　context.fillText("HTML",5　Canvas Text　50,　50);
　　　context.font = "normal"　36px Arial";
　　　context.strokeStyle = "#000000";
　　　context.strokeText("HTML"5　Canvas Text　50,　90);
　</script>

Voici le résultat du dessin sur le canevas:

police et style

dans HTML5Lorsque vous dessinez du texte sur le canevas, vous devez définir la police à utiliser. Cela se fait en définissant2La valeur de l'attribut font du contexte, qui est une chaîne de caractères compatible avec CSS, a le format suivant:

[font style][font weight][font size][font face]

Par exemple

context.font = "normal normal"　20px Verdana";

Vous pouvez définir les valeurs suivantes pour chaque partie de la chaîne de police:

Veuillez noter que tous les navigateurs ne supportent pas toutes les valeurs. Avant de vous en servir, vous devrez tester les valeurs que vous prévoyez d'utiliser.
Voici un autre exemple:

"italic bold"　36px Arial"

dessin de texte

Comme mentionné précédemment, dans HTML5Lorsque vous dessinez du texte sur le canevas, vous pouvez dessiner du texte rempli ou du texte en contour. Vous pouvez utiliser2Les fonctions fillText() et strokeText() du contexte. Les définitions de ces fonctions sont les suivantes:

fillText(textString, x, y[, maxWidth]);
strokeText(textString, x, y[, maxWidth]);

Le paramètre textString est le texte à dessiner.
Dans x et y représentent les positions obtenues dans le texte. Le paramètre x est l'endroit de début du texte. Le paramètre y est la position verticale du texte, mais la manière exacte de la représenter dépend de la ligne de base du texte. La ligne de base sera présentée dans la partie suivante.
Le texte maxWidth est recouvert dans la partie suivante.
Voici un exemple de code:

context.font = ""36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML",5　Canvas Text　50,　50);

largeur maximale du texte

le paramètre maxWidth indique au canevas que le texte ne doit pas occuper plus d'espace horizontal que la valeur donnée. Si le texte est trop large pour être contenu dans maxWidth, sa largeur sera compressée. Il n'est pas coupé. Voici un exemple de code pour dessiner le même texte avec et sans maxWidth:

context.font = ""36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML",5　Canvas Text　50,　50);
context.fillText("HTML",5　Canvas Text　50,　100,　200);

这是在HTML5画布上绘制时这两个文本的外观：

如您所见，第二个文本的宽度被压缩以适合maxWidth 200个像素.

文字颜色

像其他任何形状一样，使用2D上下文的fillStyle和 strokeStyle属性设置填充或描边文本的颜色。在这里，我不会更详细地介绍这些属性。有关 更多详细信息，请参见描边和填充。

测量文字宽度

2D上下文对象具有可以测量文本像素宽度的功能。它无法测量高度。该函数称为measureText()。这是一个代码示例：

var textMetrics = context.measureText("measure this");
var width = textMetrics.width;

测量文本的宽度可用于计算文本字符串是否适合特定空间等。

文字基线

文本基线确定如何解释和 的y参数。换句话说，垂直放置文本的位置以及该位置的解释方式。请注意，浏览器在解释此属性的方式上也可能会有细微的差异。 fillText()strokeText()
使用textBaseline2D上下文的属性设置文本基线。以下是它可以采用的值及其含义：

这是一个示例，该示例y对所有文本使用相同的值（75）绘制文本，但对所绘制的每个文本使用不同的基线。绘制一条线y=75，向您展示如何围绕该y值设置文本基线。

以下是生成上述图形的代码：

context.strokeStyle = "#000000";
context.lineWidth =　1;
context.beginPath();
context.moveTo( 0,　75);
context.lineTo(500,　75);
context.stroke();
context.closePath();
context.font = ""16px Verdana";
context.fillStyle = "#000000";
context.textBaseline = "top";
context.fillText("top", 0,　75);
context.textBaseline = "hanging";
context.fillText("hanging",　40,　75);
context.textBaseline = "middle";
context.fillText("milieu",　120,　75);
context.textBaseline = "alphabétique";
context.fillText("alphabétique",　200,　75);
context.textBaseline = "idéographique";
context.fillText("idéographique",　300,　75);
context.textBaseline = "bas";
context.fillText("bas",-glyph",　400,　75);

Alignement du texte

2L'attribut textAlign du contexte texte définit comment le texte est aligné horizontalement lors du dessin. Autrement dit, l'attribut textAlign définit la coordonnée x où le texte est dessiné.

Voici quelques exemples qui montrent comment l'attribut textAlign fonctionne. La ligne verticale est dessinée à x = 250. Tous les textes sont également dessinés avec x = 250, mais la valeur de l'attribut textAlign est différente.

Voici un exemple de code graphique :

<canvas id="ex4" width="500" height="120" style="border:　1px solide #cccccc;">
　　　　HTML5　Canvas non pris en charge
</canvas>
<script>
var canvas = document.getElementById("ex4");
var context = canvas.getContext("2d")
context.strokeStyle = "#000000";
context.lineWidth =　1;
context.beginPath();
context.moveTo(　250, 0);
context.lineTo(　250,　250);
context.stroke();
context.closePath();
context.font = ""16px Verdana";
context.fillStyle = "#000000";
context.textAlign = "center";
context.fillText("center",　250,　20);
context.textAlign = "start";
context.fillText("start",　250,　40);
context.textAlign = "end";
context.fillText("end",　250,　60);
context.textAlign = "left";
context.fillText("left",　250,　80);
context.textAlign = "right";
context.fillText("right",　250,　100);
</script>

Résultat de l'exécution du code suivant :