Méthode strokeText()
Exemple
Écrivez "Hello world!" et "Big smile!" (avec dégradé) sur le canevas en utilisant strokeText():
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "20px Georgia";
ctx.strokeText("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.strokeStyle = gradient;
ctx.strokeText("Big smile!", 10, 90); Description
La méthode strokeText() dessine du texte sur le canevas.
La strokeStyle par défaut est #000000 (noir solide).
Astuce: Utilisez la propriété font pour spécifier la police et la taille de la police, et utilisez la propriété strokeStyle pour afficher le texte dans une autre couleur ou un dégradé.
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 fillText() (Dessiner le texte)
| context .strokeText( text, x, y, maxWidth ) |
Valeurs des paramètres
| Param | Description | Jouez-le |
|---|---|---|
| text | Le texte à écrire sur le canevas | |
| x | La position de départ de la coordonnée x | |
| y | La position de départ de la coordonnée y | |
| 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).
strokeText() est pris en charge dans tous les navigateurs modernes:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |