Beispiel
Definieren Sie einen Gradienten (von links nach rechts), die von Schwarz nach Weiß geht, wie die Füllung Stil für das Rechteck:
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); Versuch es selber " Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Methode in vollem Umfang unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| createLinearGradient() | ja | 9.0 | ja | ja | ja |
Definition und Verwendung
Die createLinearGradient() Methode erstellt einen linearen Gradienten - Objekt.
Der Gradient kann verwendet werden, um Rechtecke zu füllen, Kreise, Linien, Text, etc.
Tipp: Verwenden Sie dieses Objekt als Wert an die stroke oder fillStyle Eigenschaften.
Tipp: Verwenden Sie die addColorStop() Methode verschiedene Farben zu spezifizieren, und wo die Farben im Verlauf Objekt zu positionieren.
| JavaScript-Syntax: | context.createLinearGradient(x0,y0,x1,y1); |
|---|
Parameterwerte
| Parameter | Beschreibung |
|---|---|
| x0 | Die x-Koordinate des Startpunkts des Gradienten |
| y0 | Die y-Koordinate des Startpunkts des Gradienten |
| x1 | Die x-Koordinate des Endpunktes des Gradienten |
| y1 | Die y-Koordinate des Endpunkts des Gradienten |
Mehr Beispiele
Beispiel
Definieren Sie einen Gradienten (von oben nach unten) als Füllmuster für das Rechteck:
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);
Versuch es selber " Beispiel
Definieren Sie ein Gradient von Schwarz geht, zu rot, zu weiß, wie die Füllung Stil für das Rechteck:
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);
Versuch es selber "