Beispiel
Zeichnen Sie ein Rechteck und füllen mit einem radialen / kreisförmigen Gradienten:
JavaScript:
var c=document.getElementById("myCanvas");
var
ctx=c.getContext("2d");
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,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 | |||||
|---|---|---|---|---|---|
| createRadialGradient() | ja | 9.0 | ja | ja | ja |
Definition und Verwendung
Die createRadialGradient() Methode erstellt eine radial / kreisförmigen 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 strokeStyle 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.createRadialGradient(x0,y0,r0,x1,y1,r1); |
|---|
Parameterwerte
| Parameter | Beschreibung |
|---|---|
| x0 | Die x-Koordinate des Anfangskreises des Gradienten |
| y0 | Die y-Koordinate des Anfangskreises des Gradienten |
| r0 | Der Radius des Ausgangskreises |
| x1 | Die x-Koordinate des Endkreises des Gradienten |
| y1 | Die y-Koordinate des Endkreises des Gradienten |
| r1 | Der Radius des Endkreises |