HTML-Leinwand createLinearGradient () -Methode
Beispiele
Definition von Schwarz zu Weiß-Gradienten (von links nach rechts), ein Rechteck Füllstil:
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);
Versuchen »
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari Unterstützung createLinearGradient () -Methode.
Hinweis: 8 und frühere Versionen von Internet Explorer unterstützt nicht das <canvas> -Element.
Definition und Verwendung
createLinearGradient () -Methode erstellt einen linearen Gradienten-Objekt.
Gradient kann verwendet werden, um füllen Rechtecke, Kreise, Linien, Text und so weiter.
Tipp: Verwenden Sie dieses Objekt als stroke oder fillStyle Wert der Immobilie.
Tipp: Verwenden Sie addColorStop () Methode gibt eine andere Farbe, als auch, wo das Farbverlauf - Objekt zu lokalisieren.
| JavaScript-Syntax: | Kontext .createLinearGradient (x0, y0, x1, y1); |
|---|
Parameter Wert
| 参数 | 描述 |
|---|---|
| x0 | 渐变开始点的 x 坐标 |
| y0 | 渐变开始点的 y 坐标 |
| x1 | 渐变结束点的 x 坐标 |
| y1 | 渐变结束点的 y 坐标 |
Weitere Beispiele
Beispiele
Definieren Sie einen Gradienten (von oben nach unten) als Rechteck Füllstil:
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);
Versuchen »
Beispiele
Definieren Sie eine von schwarz auf rot und dann zur weißen Steigung, ein Rechteck Füllstil:
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);
Versuchen »