HTML-Canvas -addColorStop()- Methode
Beispiel
Definieren Sie als Füllstil für das Rechteck einen Farbverlauf von Schwarz nach Weiß:
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);
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.
| Method | |||||
|---|---|---|---|---|---|
| addColorStop() | Yes | 9.0 | Yes | Yes | Yes |
Definition und Verwendung
Die Methode addColorStop() gibt die Farben und die Position in einem Verlaufsobjekt an.
Die Methode addColorStop() wird zusammen mit createLinearGradient() oder createRadialGradient() verwendet .
Hinweis: Sie können die Methode addColorStop() mehrmals aufrufen, um einen Farbverlauf zu ändern. Wenn Sie diese Methode für Verlaufsobjekte weglassen, ist der Verlauf nicht sichtbar. Sie müssen mindestens einen Farbstopp erstellen, um einen sichtbaren Verlauf zu haben.
| JavaScript-Syntax: | Farbverlauf .addColorStop ( Stopp , Farbe ); |
|---|
Parameterwerte
| Parameter | Description | Play it |
|---|---|---|
| stop | A value between 0.0 and 1.0 that represents the position between start and end in a gradient | |
| color | A CSS color value to display at the stop position |
Mehr Beispiele
Beispiel
Definieren Sie einen Farbverlauf mit mehreren Methoden addColorStop():
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);
❮ HTML-Canvas-Referenz