Propriété strokeStyle du Canvas
Exemple
Dessinez un rectangle avec strokeStyle = "red" :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "red";
ctx.strokeRect(20, 20, 150, 100); Plus d'exemples ci-dessous.
Description
La propriété strokeStyle définit ou renvoie la couleur, le dégradé ou le motif utilisé pour les contours.
La valeur par défaut est #000000 (noir solide).
Voir aussi :
La propriété fillStyle (Définir la couleur/style de remplissage)
La propriété lineWidth (Définir la largeur de ligne)
La méthode beginPath() (Commencer un nouveau chemin)
La méthode moveTo() (Déplacer le chemin vers un point)
La méthode lineTo() (Ajouter une ligne au chemin)
La méthode stroke() (Dessiner le chemin actuel)
La méthode strokeRect() (Dessiner un rectangle)
Syntaxe
| context .strokeStyle = color | gradient | pattern |
Valeurs de propriété
| Valeur | Description | Jouez-le |
|---|---|---|
| color | Une valeur de couleur CSS qui indique la couleur du contour du dessin. La valeur par défaut est #000000 | |
| gradient | Un objet dégradé ( linéaire ou radial ) utilisé pour créer un contour dégradé | |
| pattern | Un objet motif utilisé pour créer un contour en motif |
Plus d'exemples
Exemple
Dessinez un rectangle avec un dégradé strokeStyle :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Créer un dégradé
const gradient = ctx.createLinearGradient(0, 0, 170, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Remplir avec le dégradé
ctx.strokeStyle = gradient;
ctx.lineWidth = 5;
ctx.strokeRect(20, 20, 150, 100); Exemple
Écrivez le texte "Grand sourire !" avec un dégradé strokeStyle :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Verdana";
// Créer un dégradé
const gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Remplir avec le dégradé
ctx.strokeStyle = gradient;
ctx.strokeText("Grand sourire !", 10, 50); Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
strokeStyle est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |