HTML-Canvas- Verläufe
Leinwand - Farbverläufe
Farbverläufe können zum Füllen von Rechtecken, Kreisen, Linien, Text usw. verwendet werden. Formen auf der Leinwand sind nicht auf Volltonfarben beschränkt.
Es gibt zwei verschiedene Arten von Farbverläufen:
- createLinearGradient( x,y,x1,y1 ) - erstellt einen linearen Farbverlauf
- createRadialGradient( x,y,r,x1,y1,r1 ) - erstellt einen radialen/kreisförmigen Farbverlauf
Sobald wir ein Verlaufsobjekt haben, müssen wir zwei oder mehr Farbstopps hinzufügen.
Die Methode addColorStop() gibt die Farbstopps und ihre Position entlang des Farbverlaufs an. Gradientenpositionen können irgendwo zwischen 0 und 1 liegen.
Um den Farbverlauf zu verwenden, legen Sie die Eigenschaft fillStyle oder strokeStyle auf den Farbverlauf fest und zeichnen Sie dann die Form (Rechteck, Text oder eine Linie).
Verwenden von createLinearGradient ()
Beispiel
Erstellen Sie einen linearen Farbverlauf. Rechteck mit Farbverlauf füllen:
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);
Verwenden von createRadialGradient():
Beispiel
Erstellen Sie einen radialen/kreisförmigen Farbverlauf. Rechteck mit Farbverlauf füllen:
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);