La méthode CanvasRenderingContext2D.strokeText()
de l'API Canvas 2D trace le texte fourni à la position donnée (x, y). Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur.
Voir aussi la méthode CanvasRenderingContext2D.fillText()
pour dessiner un texte rempli.
Syntaxe
void ctx.strokeText(texte, x, y [, largeurMax]);
Paramètres
texte
- Le texte à tracer en utilisant les valeurs en cours de
font
,textAlign
,textBaseline
, etdirection
.
x
- La coordonnée sur l'axe des x du point de départ du texte.
y
- La coordonnée sur l'axe des y du point de départ du texte.
largeurMax
Facultatif- La largeur maximum à dessiner. Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite.
Exemples
Utilisation de la méthode strokeText
Il ne s'agit que d'un extrait de code simple qui utilise la méthode strokeText
.
HTML
<canvas id="canevas"></canvas>
JavaScript
var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.font = '48px serif'; ctx.strokeText('Hello world', 50, 100);
Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas:
Spécifications
Spécification | Statut | Commentaire |
---|---|---|
HTML Living Standard La définition de 'CanvasRenderingContext2D.strokeText' dans cette spécification. |
Standard évolutif |
Compatibilité des navigateurs
Ordinateur | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Support simple | Chrome Support complet Oui | Edge Support complet 12 | Firefox Support complet 3.5 | IE Support complet 9 | Opera Support complet Oui | Safari Support complet Oui | WebView Android Support complet Oui | Chrome Android Support complet Oui | Edge Mobile Support complet Oui | Firefox Android Support complet Oui | Opera Android Support complet Oui | Safari iOS Support complet Oui | Samsung Internet Android Support complet Oui |
Légende
- Support complet
- Support complet
Voir aussi
- L'interface la définissant,
CanvasRenderingContext2D
CanvasRenderingContext2D.fillText()