Méthode createLinearGradient()du canvas HTML

HTML canvas 参考手册Manuel de référence HTML canvas

Exemple

Définissez un dégradé du noir au blanc (de gauche à droite), comme style de remplissage d'un 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 »

Prise en charge des navigateurs

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

Remarque :Internet Explorer 8 et les versions antérieures 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.

Les dégradés peuvent être utilisés pour remplir des rectangles, des cercles, des lignes, du texte, etc.

Astuce :Utilisez cet objet comme valeur de la propriétéstrokeStyleoufillStyle.

Astuce :Utilisez la méthodeaddColorStop()pour spécifier différentes couleurs et où placer les couleurs dans l'objet dégradé.

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

Valeurs des paramètres

Paramètre Description
x0 La coordonnée x du point de départ du dégradé
y0 La coordonnée y du point de départ du dégradé
x1 La coordonnée x du point d'arrivée du dégradé
y1 La coordonnée y du point de fin du dégradé

实例

Plus d’exemples

Exemple

Définir un dégradé (de haut en bas) comme style de remplissage d'un 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

Définir un dégradé allant du noir au rouge puis au blanc, comme style de remplissage d'un 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 »

HTML canvas 参考手册Manuel de référence HTML canvas Autres extensions