Metoden Canvas addColorStop()
Definition och användning
addColorStop() metoden specificerar färg och position i gradient-objektet.
addColorStop() metod med createLinearGradient() eller createRadialGradient() Samtidigt använda.
Kommentar:Du kan anropa addColorStop() metoden flera gånger för att ändra gradienten. Om du inte använder denna metod på gradient-objektet, kommer gradienten att vara osynlig. För att få en synlig gradient behöver du skapa minst en färgstämpel.
Exempel
Exempel 1
Definiera en gradient från svart till vit som fyllningsstil för rektangeln:
JavaScript:
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"svart");
grd.addColorStop(1,"vit");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Tips:Mer exempel finns tillgängliga längre ner på sidan.
Syntaks
gradient.addColorStop(stop,color);
Parametervärde
| Parameter | Beskrivning |
|---|---|
| stop | Värden mellan 0.0 och 1.0 som representerar positionen mellan början och slut i gradienten. |
| color | CSS-färgvärden som visas vid slutpositionen. |
Fler exempel
Exempel 2
Definiera gradienten genom flera addColorStop() metoder:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"svart");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blå");
grd.addColorStop("0.6","grön");
grd.addColorStop("0.8","gul");
grd.addColorStop(1,"röd");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Webbläsarstöd
Talen i tabellen anger den första webbläsareversion som helt stöder detta egenskap.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Kommentar:Internet Explorer 8 och äldre versioner stöder inte <canvas>-elementet.
