Texte du canevas HTML
Dessiner du texte sur la toile
Pour dessiner du texte sur un canevas, les propriétés et méthodes les plus importantes sont :
- font - définit les propriétés de la police pour le texte
- fillText( text,x,y ) - dessine du texte "rempli" sur le canevas
- strokeText( text,x,y ) - dessine du texte sur le canevas (pas de remplissage)
Utilisation de fillText()
Exemple
Définissez la police sur 30px "Arial" et écrivez un texte rempli sur le canevas :
JavaScript :
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Utilisation de strokeText()
Exemple
Définissez la police sur 30px "Arial" et écrivez un texte, sans remplissage, sur le canevas :
JavaScript :
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Ajouter de la couleur et centrer le texte
Exemple
Définissez la police sur 30px "Comic Sans MS" et écrivez un texte rempli en rouge au centre de la toile :
JavaScript :
var
canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);