Texte Canvas
Le canevas HTML5 permet de créer du texte en utilisant différentes propriétés de police et de texte présentées ci-dessous :
Propriétés et Méthodes
| Propriété / Méthode | Description |
|---|---|
| font | Il renvoie les paramètres de police actuels et peut être défini pour modifier la police. |
| textAlign | Il renvoie les paramètres d'alignement du texte actuels et peut être défini pour modifier l'alignement. La propriété prend les valeurs suivantes : start, end, left, right et center. Notez que start et end dépendent de la direction du texte. |
| textBaseline | Il renvoie les paramètres d'alignement de la ligne de base actuels et peut être défini pour modifier l'alignement de la ligne de base. La propriété prend les valeurs suivantes : top, hanging, middle, alphabetic, ideographic et bottom. |
| fillStyle | Définit la couleur utilisée pour remplir le texte. |
| strokeStyle | Définit la couleur utilisée pour tracer le contour du texte. |
| fillText(text, x, y) | Dessine un texte rempli à la position indiquée par les coordonnées x et y données. |
| strokeText(text, x, y) | Trace le contour du texte à la position indiquée par les coordonnées x et y données. |
Exemple de la méthode fillText() :
Exemple de la méthode fillText()
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("exampleCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 70, 80);
</script>
</body>
</html>Exemple de la méthode strokeText() :
Exemple de la méthode strokeText()
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="250" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("exampleCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "27px Arial";
ctx.strokeText("Canvas text", 40, 70);
</script>
</body>
</html>Exemple d'ajout de couleur et de centrage du texte :
Exemple d'ajout de couleur et de centrage du texte
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="400" height="250" style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("exampleCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "40px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Canvas Text", canvas.width / 2, canvas.height / 2);
</script>
</body>
</html>Pratique
Quelle est la fonctionnalité de la méthode 'fillText()' du canevas HTML5 concernant le texte ?