Exemple
Dessiner 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 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 | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Définition et utilisation
Les ensembles de propriétés strokeStyle ou renvoie la couleur, dégradé ou motif utilisé pour des courses.
| Valeur par défaut: | # 000000 |
|---|---|
| syntaxe JavaScript: | context .strokeStyle= color | gradient | pattern ; |
Valeurs de propriété
| Valeur | La description | Joue-le |
|---|---|---|
| color | Une valeur de couleur CSS qui indique la couleur du contour du dessin. Valeur par défaut est # 000000 | Joue-le " |
| gradient | Un objet de gradient ( linéaire ou radial ) utilisé pour créer une course de gradient | |
| pattern | Un modèle objet utilisé pour créer une course de motif |
autres exemples
Exemple
Dessiner un rectangle. Utilisation d'une course de gradient:
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 vous - même » Exemple
Écrivez le texte "Big smile!" , Avec une course de gradient:
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 vous - même » <Canvas objet