Manuel de référence HTML

Tous les tags HTML

Méthode createLinearGradient() de HTML canvas

La méthode createLinearGradient() crée une dégradé linéaire suivant les coordonnées spécifiées par les paramètres. Cette méthode retourne un objet CanvasGradient linéaire.

Manuel de référence pour HTML canvas

Exemple en ligne

Définir une dégradation de rouge à blanc (de gauche à droite) en tant que style de remplissage de rectangle :

Demonstration de l'utilisation de la méthode createLinearGradient() :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Utilisation de la méthode createLinearGradient() pour HTML canvas (Tutoriel de base du site web HTML canvas)3codebox.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge l'HTML5　canvas balise.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
var　grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0, "red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

Testez pour voir ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome et Safari prennent en charge la méthode createLinearGradient().

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

Définition et utilisation

La méthode createLinearGradient() crée un objet de dégradé linéaire.
La dégradation peut être utilisée pour remplir des rectangles, des cercles, des lignes, du texte, etc.

Avis :Utilisez cet objet comme strokeStyle ou fillStyle la valeur de l'attribut.

Avis :Utilisez addColorStop() La méthode spécifie différentes couleurs et où ces couleurs sont positionnées dans l'objet gradient.

Syntaxe JavaScript :	context.createLinearGradient(x0, y0, x1,y1);

Valeur du paramètre

Paramètres	Description
x0	Coordonnée x du point de départ de la dégradation
y0	Coordonnée y du point de départ de la dégradation
x1	Coordonnée x de l'extrémité de la dégradation
y1	Coordonnée y de l'extrémité de la dégradation

Plus d'exemples

Exemple en ligne

Définir une dégradation (du haut vers le bas) en tant que style de remplissage de rectangle :

Démonstration avec JavaScript :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Utilisation de la méthode createLinearGradient() pour HTML canvas (Tutoriel de base du site web HTML canvas)3codebox.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge l'HTML5　canvas balise.
</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>
</body>
</html>

Testez pour voir ‹/›

Exemple en ligne

Définir une dégradation de noir à rouge puis blanc en tant que style de remplissage de rectangle :

Demonstration de l'utilisation de la méthode createLinearGradient() :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Utilisation de la méthode createLinearGradient() pour HTML canvas (Tutoriel de base du site web HTML canvas)3codebox.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge l'HTML5　canvas balise.
</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>
</body>
</html>

Testez pour voir ‹/›

Manuel de référence pour HTML canvas

HTML: <template> balise