Exemple
Dessinez un rectangle. Utilisez une couleur de trait de rouge:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);
Essayez - le vous - même » support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| strokeStyle | Oui | 9.0 | Oui | Oui | Oui |
Définition et utilisation
Les ensembles de propriétés strokeStyle ou renvoie la couleur, dégradé ou motif utilisé pour les courses.
| Valeur par défaut: | # 000000 |
|---|---|
| Syntaxe JavaScript: | context.strokeStyle=color|gradient|pattern; |
propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| color | Une valeur de couleur CSS qui indique la couleur du contour du dessin. La valeur par défaut est #000000 | Joue-le " |
| gradient | Un objet de gradient ( linear ou radial ) utilisé pour créer une course de gradient | |
| pattern | Un pattern objet utilisé pour créer une course de motif |
Autres exemples
Exemple
Dessinez un rectangle. Utilisez un contour dégradé:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
Essayez - le vous - même » Exemple
Écrivez le texte "Big smile!" , Avec un contour dégradé:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
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,50);
Essayez - le vous - même »