Dessin texte sur le canevas
Pour dessiner le texte sur une toile, la propriété et les méthodes les plus importantes sont:
- font - définit les propriétés de police pour le texte
- fillText( text,x,y ) - dessine "filled" texte sur la toile
- strokeText( text,x,y ) - dessine le texte sur la toile (no fill) de (no fill)
À l' aide fillText()
Exemple
Définir la police à 30px "Arial" et écrire un texte rempli sur la toile:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); Essayez - le vous - même » À l' aide strokeText()
Exemple
Définir la police à 30px "Arial" et écrire un texte, sans remplissage, sur la toile:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); Essayez - le vous - même » Ajouter couleur et Centre texte
Exemple
Définir la police à 30px "Comic Sans MS" et écrire un texte rouge rempli dans le 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);
Essayez - le vous - même »