Méthode fillText()
Exemple
Écrivez "Hello world!" et "Grand sourire!" (avec dégradé) sur le canevas, en utilisant fillText():
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "20px Georgia";
ctx.fillText("Hello World!", 10, 50);
ctx.font = "30px Verdana";
// Créer un dégradé
const gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Remplir avec le dégradé
ctx.fillStyle = gradient;
ctx.fillText("Grand sourire!", 10, 90); Description
La méthode fillText() dessine du texte rempli sur le canevas.
La fillStyle par défaut est #000000 (noir solide).
Voir aussi:
La propriété font (Définir la police et la taille du texte)
La propriété fillStyle (Définir la couleur ou le dégradé du texte)
La propriété textAlign (Définir l'alignement du texte)
La propriété textBaseline (Définir la ligne de base du texte)
La méthode strokeText() (Dessiner le texte)
Syntaxe
| context .fillText( text, x, y, maxWidth ) |
Valeurs des paramètres
| Param | Description | Jouez-le |
|---|---|---|
| text | Le texte à écrire sur le canevas | |
| x | La coordonnée x pour commencer le texte | |
| y | La coordonnée y pour commencer le texte | |
| maxWidth | (Optionnel) La largeur maximale du texte en pixels |
Valeur de retour
| AUCUN |
Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
fillText() est pris en charge dans tous les navigateurs modernes:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |