Méthode createLinearGradient() du canvas HTML

Manuel de référence du canvas HTML5

Définition et utilisation

createLinearGradient() La méthode crée un objet de dégradé linéaire.

La dégradé peut être utilisée pour remplir des rectangles, des cercles, des lignes, du texte, etc.

Avis :Veuillez utiliser cet objet en tant que strokeStyle ou fillStyle la valeur de l'attribut.

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

Exemple

Veuillez également consulter :

Définir une dégradé allant du noir au blanc (de gauche à droite), en tant que style de remplissage du rectangle :

Votre navigateur ne prend pas en charge la balise canvas HTML5.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

Essayez-le vous-même

Syntaxe

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égradé
y0 Coordonnée y du point de départ de la dégradé
x1 Coordonnée x de l'extrémité de la dégradé
y1 Coordonnée y de l'extrémité de la dégradé

Plus d'exemples

Exemple 2

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

Votre navigateur ne prend pas en charge la balise canvas.

JavaScript:

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);

Essayez-le vous-même

Exemple 3

Définir une dégradé allant du noir au rouge puis au blanc, en tant que style de remplissage du rectangle :

Votre navigateur ne prend pas en charge la balise canvas.

JavaScript:

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);

Essayez-le vous-même

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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

Manuel de référence du canvas HTML5