méthode toile HTML createLinearGradient ()
HTML Manuel toile de référence
Exemples
Définition du noir au blanc gradient (de gauche à droite), un style rectangle de remplissage:
JavaScript:
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 »
support du navigateur
Internet Explorer 9, la méthode Firefox, Opera, Chrome et Safari soutien createLinearGradient ().
Note: 8 et versions antérieures d'Internet Explorer ne prennent pas en charge l'élément <canvas>.
Définition et utilisation
méthode createLinearGradient () crée un objet dégradé linéaire.
Gradient peut être utilisé pour remplir des rectangles, des cercles, des lignes, du texte, et ainsi de suite.
Astuce: Utilisez cet objet comme strokeStyle ou fillStyle valeur de la propriété.
Astuce: Utilisez addColorStop () méthode spécifie une couleur différente, ainsi que là où pour localiser l'objet de dégradé de couleur.
| Syntaxe JavaScript: | .createLinearGradient contexte (x0, y0, x1, y1); |
|---|
Paramètre Valeur
| 参数 | 描述 |
|---|---|
| x0 | 渐变开始点的 x 坐标 |
| y0 | 渐变开始点的 y 坐标 |
| x1 | 渐变结束点的 x 坐标 |
| y1 | 渐变结束点的 y 坐标 |
D'autres exemples
Exemples
Définir un gradient (de haut en bas) comme un style rectangle de remplissage:
JavaScript:
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 »
Exemples
Définir un du noir au rouge, puis à gradient blanc, un style rectangle de remplissage:
JavaScript:
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 »
HTML Manuel toile de référence