Canvas addColorStop() Methode
Definition und Verwendung
addColorStop() Methode legt die Farben und Positionen im gradient-Objekt fest.
addColorStop() Methode mit createLinearGradient() oder createRadialGradient() Zusammen verwenden.
Anmerkung:Sie können die Methode addColorStop() mehrmals aufrufen, um den Verlauf zu ändern. Wenn Sie das gradient-Objekt nicht mit dieser Methode verwenden, wird der Verlauf unsichtbar. Um einen sichtbaren Verlauf zu erhalten, müssen Sie mindestens eine Farbmarke erstellen.
Beispiel
Beispiel 1
Definieren Sie einen Verlauf von schwarz nach weiß als Füllmuster für das Rechteck:
JavaScript:
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"schwarz");
grd.addColorStop(1,"weiß");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Hinweis:Mehr Beispiele finden Sie am Ende der Seite.
Syntax
gradient.addColorStop(stop,color);
Parameterwert
| Parameter | Beschreibung |
|---|---|
| stop | Werte zwischen 0.0 und 1.0, die den Ort zwischen dem Anfang und dem Ende der Verlaufsformel darstellen. |
| color | CSS-Farbe am Ende der Position angezeigt. |
Mehr Beispiele
Beispiel 2
Durch mehrere addColorStop()-Methoden wird die Verlaufsformel definiert:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"schwarz");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blau");
grd.addColorStop("0.6","grün");
grd.addColorStop("0.8","gelb");
grd.addColorStop(1,"rot");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Browser-Unterstützung
Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, 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.
