Exemple
Ecrire "Hello world!" tout le "Hello world!" et "Big smile!" (with gradient) sur la toile, en utilisant strokeText() :
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.strokeText("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.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,90);
Essayez vous - même » Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| strokeText() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note: Le paramètre maxWidth est pas pris en charge dans Safari.
Définition et utilisation
Le strokeText() méthode dessine le texte (with no fill) sur la toile. La couleur par défaut du texte est noir.
Tip: Utilisez la police propriété pour spécifier la police et la taille de la police, et utiliser la strokeStyle propriété pour rendre le texte dans une autre couleur / dégradé.
| syntaxe JavaScript: | context . strokeText( text,x,y,maxWidth ) ; |
|---|
Les valeurs des paramètres
| Paramètre | La description | Joue-le |
|---|---|---|
| text | Indique le texte qui sera écrit sur la toile | Joue-le " |
| x | Les coordonnées 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 autorisée du texte, en pixels | Joue-le " |
<Canvas objet