Leinwand - Gradients
Gradients kann verwendet werden, um Rechtecke zu füllen, Kreise, Linien, Text usw. Formen auf der Leinwand sind nicht an feste Farben beschränkt.
Es gibt zwei verschiedene Arten von Gradienten:
- createLinearGradient ( x,y,x1,y1 ) - erzeugt einen linearen Gradienten
- createRadialGradient ( x,y,r,x1,y1,r1 ) - erzeugt eine radial / kreisförmigen Gradienten
Sobald wir ein Gefälle zum Gegenstand haben, müssen wir zwei oder mehr Farbstopps hinzufügen.
Die addColorStop() Methode gibt die Farbstopps, und ihre Position entlang des Gradienten. Gradient Positionen kann irgendwo zwischen 0 auf 1 sein.
Um den Gradienten verwenden, stellen Sie den fillStyle oder stroke Eigenschaft der Steigung, dann die Form zu zeichnen (rectangle, text, or a line) .
Mit createLinearGradient()
Beispiel
Erstellen Sie einen linearen Gradienten. Füllen Sie Rechteck mit dem Farbverlauf:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80); Versuch es selber " Verwendung createRadialGradient() :
Beispiel
Erstellen Sie eine radial / kreisförmigen Gradienten. Füllen Sie Rechteck mit dem Farbverlauf:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); Versuch es selber "