HTML canvas strokeStylePropriété
Exemples
Dessinez un rectangle. Utilisez une couleur de trait rouge :
JavaScript :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);
var ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);
Essayez-le vous-même »
Prise en charge des navigateurs
Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge la propriété strokeStyle.
Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.
Définition et utilisation
La propriété strokeStyle définit ou renvoie la couleur, le dégradé ou le motif utilisé pour les traits.
| Valeur par défaut : | #000000 |
|---|---|
| Syntaxe JavaScript : | context.strokeStyle=couleur|dégradé|motif; |
Valeurs de propriété
| Valeur | Description |
|---|---|
| color | qui indique la couleur du contour du dessinvaleur de couleur CSS. La valeur par défaut est #000000. |
| dégradé | Objet de dégradé utilisé pour remplir le dessin (linéaireouradial）。 |
| pattern | utilisé pour créer des contours à motifpatternobjet pattern. |
Plus d’exemples
Exemple
Dessinez un rectangle. Utilisez un trait 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");
// Remplir avec un dégradé
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
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");
// Remplir avec un dégradé
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";
// Créer un dégradé
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Remplir avec un dégradé
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Créer un dégradé
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Remplir avec un dégradé
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);
Essayez-le vous-même »
Référence HTML canvas Autres extensions