Exemple
Ecrire "Hello world!" tout le "Hello world!" et "Big smile!" (avec gradient) sur la toile, en utilisant fillText() :
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("Big smile!",10,90);
Essayez - le vous - même » support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui soutient pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| fillText() | Oui | 9.0 | Oui | Oui | Oui |
Remarque: Le paramètre maxWidth est pas pris en charge dans Safari 5.1 et les versions antérieures.
Définition et utilisation
Le fillText() méthode dessine le texte rempli sur la toile. La couleur par défaut du texte est noir.
Astuce: Utilisez la font propriété pour spécifier la police et la taille, et utiliser le fillStyle propriété de rendre le texte dans une autre couleur / gradient.
| Syntaxe JavaScript: | context.fillText(text,x,y,maxWidth); |
|---|
Paramètre valeurs
| Paramètre | La description | Joue-le |
|---|---|---|
| text | Indique le texte qui sera écrit sur la toile | Joue-le " |
| x | La coordonnée x où commencer à peindre le texte (par rapport à la toile) | Joue-le " |
| y | La coordonnée y où commencer à peindre le texte (par rapport à la toile) | Joue-le " |
| maxWidth | Optionnel. La largeur maximale permise du texte, en pixels, | Joue-le " |