Beispiel
Definieren Sie eine Steigung, die für das Rechteck von Schwarz auf Weiß, wie die Füllung Stil geht:
JavaScript:
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,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 | |||||
|---|---|---|---|---|---|
| addColorStop() | ja | 9.0 | ja | ja | ja |
Definition und Verwendung
Die addColorStop() Methode gibt die Farben und die Position in einem Gradienten - Objekt.
Die addColorStop() Methode wird verwendet , zusammen mit createLinearGradient() oder createRadialGradient() .
Hinweis: Sie können den Anruf addColorStop() Methode mehrere Male mit einem Gradienten zu ändern.Wenn Sie diese Methode für Gradienten Objekte weglassen, wird der Gradient nicht sichtbar sein. Sie müssen mindestens einen Farbanschlag zu erzeugen einen sichtbaren Steigung zu haben.
| JavaScript-Syntax: | gradient.addColorStop(stop,color); |
|---|
Parameterwerte
| Parameter | Beschreibung | Spiel es |
|---|---|---|
| stop | Ein Wert zwischen 0,0 und 1,0, die die Position zwischen Anfang und Ende in einem Gradienten darstellt | Spiel es " |
| color | Ein CSS - Farbwert an derStopppositionangezeigt werden | Spiel es " |
Mehr Beispiele
Beispiel
Definieren Sie einen Gradienten mit mehreren addColorStop() Methoden:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Versuch es selber "