Beispiel
Zeichnen eines Rechtecks und füllen mit einem radial / Kreis Gradient:
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 vollständig unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| createRadialGradient() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definition und Verwendung
Die createRadialGradient() Methode erzeugt ein Radial- / kreisförmigen 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 . 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 Endes Kreis des Gradienten |
| y1 | Die y-Koordinate des Endkreises des Gradienten |
| r1 | Der Radius des Endkreises |
<Canvas Object