Méthode HTML canvas fillText()
Exemple
Écrivez "Bonjour le monde !" et "Grand sourire!" (avec dégradé) sur le canevas, 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);
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la méthode.
| Method | |||||
|---|---|---|---|---|---|
| fillText() | Yes | 9.0 | Yes | Yes | Yes |
Remarque : Le paramètre maxWidth n'est pas pris en charge dans Safari 5.1 et les versions antérieures.
Définition et utilisation
La méthode fillText() dessine du texte rempli sur le canevas. La couleur par défaut du texte est le noir.
Astuce : Utilisez la propriété font pour spécifier la police et la taille de la police, et utilisez la propriété fillStyle pour afficher le texte dans une autre couleur/dégradé.
| Syntaxe JavaScript : | contexte .fillText( text,x,y,maxWidth ); |
|---|
Valeurs des paramètres
| Parameter | Description | Play it |
|---|---|---|
| text | Specifies the text that will be written on the canvas | |
| x | The x coordinate where to start painting the text (relative to the canvas) | |
| y | The y coordinate where to start painting the text (relative to the canvas) | |
| maxWidth | Optional. The maximum allowed width of the text, in pixels |
❮ Référence de canevas HTML