Beispiel
Definieren Sie einen Gradienten (left to right) von (left to right) , die von Schwarz nach Weiß geht, als Füllstil 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 vollständig unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| createLinearGradient() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definition und Verwendung
Die createLinearGradient() Methode erstellt ein lineares Gradienten - Objekt.
Der Gradient kann verwendet werden, um Rechtecke zu füllen, Kreise, Linien, Text, etc.
Tip: Verwenden Sie dieses Objekt als Wert an die stroke oder fillStyle Eigenschaften.
Tip: Verwenden Sie die addColorStop() Methode verschiedene Farben zu spezifizieren, und wobei die Farben in dem Farbverlauf - Objekt zu positionieren.
| JavaScript-Syntax: | context . createLinearGradient( x0,y0,x1,y1 ) ; |
|---|
Parameterwerte
| Parameter | Beschreibung |
|---|---|
| x0 | Die x-Koordinate des Startpunktes des Gradienten |
| y0 | Die y-Koordinate des Startpunktes des Gradienten |
| x1 | Die x-Koordinate des Endpunkts des Gradienten |
| y1 | Die y-Koordinate des Endpunkts des Gradienten |
Mehr Beispiele
Beispiel
Definiert einen Gradienten (top to bottom) von (top to bottom) 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 eine Steigung, die von Schwarz geht, zu rot, zu weiß, wie die Füllstil 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 " <Canvas Object