Manuel de référence HTML

Tous les balises HTML

Attribut fillStyle de HTML canvas

L'attribut fillStyle() de HTML canvas est utilisé pour définir la couleur, la dégradé ou le motif de dessin. La valeur par défaut est＃000000. <canvas> élément vous permet d'utiliser JavaScript pour dessiner des graphiques sur une page Web. Chaque canevas a deux éléments qui décrivent la hauteur et la largeur du canevas, respectivement la hauteur et la largeur.

Exemple en ligne

Définir la couleur de remplissage rouge pour le rectangle :

JavaScript :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Utilisation de la propriété fillStyle du canvas HTML (Tutoriel de base du site web oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px 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.fillStyle="#FF0000";
ctx.fillRect(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 fillStyle.

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

Définition et utilisation

<canvas> élément vous permet d'utiliser JavaScript pour dessiner des graphiques sur une page Web. Chaque canevas a deux éléments qui décrivent la hauteur et la largeur du canevas, respectivement la hauteur et la largeur.

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

Valeur de l'attribut

Valeur	Description
color	Indiquer la couleur de remplissage du dessin Valeur de couleur CSS。La valeur par défaut est #000000。
gradient	Utilisé pour remplir le dessin le dégradé objet (Linéaire Ou Radioactif)。
pattern	Utilisé pour remplir le dessin pattern Objet.

Plus d'exemples

Exemple en ligne

Définir une dégradé (du haut vers le bas) comme style de remplissage de rectangle :

JavaScript :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Utilisation de la propriété fillStyle du canvas HTML (Tutoriel de base du site web oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var my_gradient = ctx.createLinearGradient(0, 0, 0,　170);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20,　20,　150,　100);
</script>
<p>Attention : Internet Explorer　8et les versions antérieures ne prennent pas en charge l'élément canvas.</p>
</body>
</html>

Voyons voir ‹/›

Exemple en ligne

Définir un dégradé horizontal comme style de remplissage de losange :

JavaScript :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Utilisation de la propriété fillStyle du canvas HTML (Tutoriel de base du site web oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0,　170, 0);
grd.addColorStop(0, "black");
grd.addColorStop(0.5, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(20,　20,　150,　100);
</script>
<p>Attention : Internet Explorer　8et les versions antérieures ne prennent pas en charge l'élément canvas.</p>
</body>
</html>

Voyons voir ‹/›

Exemple en ligne

Définir un dégradé du noir au rouge au blanc comme style de remplissage de losange :

JavaScript :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Utilisation de la propriété fillStyle du canvas HTML (Tutoriel de base du site web oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var my_gradient = ctx.createLinearGradient(0, 0,　170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(0.5, "red");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20,　20,　150,　100);
</script>
<p>Attention : Internet Explorer　8et les versions antérieures ne prennent pas en charge l'élément canvas.</p>
</body>
</html>

Voyons voir ‹/›

Images utilisées :

Exemple en ligne

Utilisation d'une image pour remplir le dessin :

JavaScript :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Utilisation de la propriété fillStyle du canvas HTML (Tutoriel de base du site web oldtoolbag.com)</title>
</head>
<body>
<p>Application de l'image :/p>
<img src="haha.gif" id="lamp">
<p>Canvas :</p>
<button onclick="draw(&39;repeat')">Répéter</bouton>　
<button onclick="draw(&39;repeat-x')">Répéter-x</bouton>　
<button onclick="draw(&39;repeat-y')">Répéter-y</bouton>　
<button onclick="draw(&39;no-repeat')">Ne pas répéter</bouton>　　　　　
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　canvas balise.
</canvas>
<script>
function draw(direction)
{
　　　　var c=document.getElementById("myCanvas");
　　　　var ctx=c.getContext("2d");
　　　　ctx.clearRect(0,0,c.width,c.height);　
　　　　var img=document.getElementById("lamp")
　　　　var pat=ctx.createPattern(img,direction);
　　　　ctx.rect(0,0,220,128);
　　　　ctx.fillStyle=pat;
　　　　ctx.fill();
}
</script>
</body>
</html>

Voyons voir ‹/›

Guide de référence HTML canvas

HTML: <template> balise