Manuel de référence HTML

Tous les balises HTML

Attribut strokeStyle de stroke de canvas HTML

L'attribut strokeStyle du canvas HTML est utilisé pour définir la couleur, le dégradé ou le motif du pinceau de dessin. L'élément <canvas> vous permet d'utiliser JavaScript pour dessiner des graphiques sur une page web. Chaque canevas a deux éléments décrivant la hauteur et la largeur du canevas, respectivement la hauteur et la largeur.

Manuel de référence HTML canvas

Exemple en ligne

Tracez un rectangle en utilisant la couleur de pinceau rouge :

Démonstration en ligne de l'utilisation de l'attribut strokeStyle de canvas HTML :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Utilisation de l'attribut strokeStyle de canvas HTML (Tutoriel de base du site web oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" hauteur="150" style="bordure:1px épaisseur solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　balise canvas.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);
</script>
</body>
</html>

Voyons voir ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome et Safari prennent en charge l'attribut strokeStyle.

Remarque :Internet Explorer 8 et les versions précédentes ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

L'attribut strokeStyle définit ou retourne la couleur, le dégradé ou le motif du pinceau de dessin.

Valeur par défaut :	#000000
Syntaxe JavaScript :	contexte.strokeStyle=color\|gradient\|pattern;

Valeur de l'attribut

Valeur	Description
color	Indiquant la couleur du pinceau de dessin Valeur de couleur CSS。) La valeur par défaut est #000000。
gradient	Utilisé pour créer un objet de dégradé qui remplit le dessin (linéaire ou radiatif)。
pattern	Utilisé pour créer un pinceau de dégradé pattern pattern objet.

Exemple en ligne

Tracez un rectangle. Utilisez un pinceau de dégradé :

Démonstration en ligne de l'utilisation de l'attribut strokeStyle de canvas HTML :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Utilisation de l'attribut strokeStyle de canvas HTML (Tutoriel de base du site web oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" hauteur="150" style="bordure:1px épaisseur solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　balise canvas.</canvas>
<script>
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");
//Remplissage par dégradé
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
</script>
</body>
</html>

Voyons voir ‹/›

Exemple en ligne

Écrivez le texte "Big smile!" avec un pinceau de dégradé :

Démonstration en ligne de l'utilisation de l'attribut strokeStyle de canvas HTML :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Utilisation de l'attribut strokeStyle de canvas HTML (Tutoriel de base du site web oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" hauteur="150" style="bordure:1px épaisseur solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　Balise canvas
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.font="30px　Verdana";
//　Création du 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");
//　Remplissage par dégradé
ctx.strokeStyle=gradient;
ctx.strokeText("Big　smile!",10,50);
</script>
</body>
</html>

Voyons voir ‹/›

Manuel de référence HTML canvas

HTML: <template> balise