Beispiel
Definieren Sie eine Steigung, die für das Rechteck von Schwarz auf Weiß, wie die Füllstil 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 vollständig unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| addColorStop() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
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() .
Note: Sie können den Anruf addColorStop() Methode mehrfach 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 erzeugen einen sichtbaren Farbverlauf 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 - stop Farbwert am anzuzeigen stop | Spiel es " |
Mehr Beispiele
Beispiel
Definieren eines Gradienten mit mehreren addColorStop() Methode:
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 "