HTML canvas createRadialGradient() Methode

HTML5 Canvas Referenzhandbuch

Definition und Verwendung

createLinearGradient() Methode zum Erstellen eines radialen/kreisförmigen Farbverlaufobjekts.

Der Farbverlauf kann zur Füllung von Rechtecken, Kreisen, Linien, Text und vielem mehr verwendet werden.

Hinweis:Verwenden Sie dieses Objekt als strokeStyle oder fillStyle den Wert der Eigenschaft.

Hinweis:Verwenden Sie addColorStop() Die Methode legt verschiedene Farben fest und gibt an, wo die Farben im Gradientenobjekt positioniert sind.

Beispiel

Zeichnen Sie ein Rechteck und füllen Sie es mit einem radialen/kreisförmigen Farbverlauf:

Ihr Browser unterstützt das HTML5 Canvas-Tag nicht.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd =ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "rot");
grd.addColorStop(1, "weiß");
// Mit Gradient füllen
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,100);

Selbst ausprobieren

Syntax

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

Parameterwert

Parameter Beschreibung
x0 x-Koordinate des Anfangskreises der Farbverteilung
y0 y-Koordinate des Anfangskreises der Farbverteilung
r0 Radius des Anfangskreises
x1 x-Koordinate des Endkreises der Farbverteilung
y1 y-Koordinate des Endkreises der Farbverteilung
r1 Endradius des Kreises

Browserunterstützung

Die in der Tabelle genannten Zahlen geben die erste Browserversion an, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

HTML5 Canvas Referenzhandbuch