Exemplu
Definiți un gradient care merge de la negru la alb, ca stilul de umplere pentru dreptunghi:
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); Încearcă - l singur » Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin metoda.
| Metodă | |||||
|---|---|---|---|---|---|
| addColorStop() | 4 | 9 | 3.6 | 4 | 10.1 |
Definiție și utilizare
addColorStop() metoda specifică culorile și poziția într - un obiect de gradient.
addColorStop() Metoda este utilizată împreună cu createLinearGradient() sau createRadialGradient() .
Note: Puteți apela addColorStop() metoda de mai multe ori pentru a schimba un gradient. Dacă omiteți această metodă pentru obiecte de gradient, gradientul nu va fi vizibil. Trebuie să creați cel puțin un opritor de culoare pentru a avea un gradient vizibil.
| sintaxa JavaScript: | gradient . addColorStop( stop , color ) ; |
|---|
Valorile parametrilor
| Parametru | Descriere | Joaca-l |
|---|---|---|
| stop | O valoare între 0.0 și 1.0, care reprezintă poziția între început și sfârșit într-un gradient | Joaca - l » |
| color | O valoare de stop culoare CSS pentru a afișa la stop poziția | Joaca - l » |
Mai multe exemple
Exemplu
Definiți un gradient cu multiple addColorStop() metode:
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);
Încearcă - l singur »