Canvas lisääVäritulon() metodi
määrittää ja käyttää
addColorStop() määrittää gradient-objektin värit ja sijainnit.
addColorStop() -menetelmä yhdessä createLinearGradient() tai createRadialGradient() Yhdessä käytettynä.
Huomautus:Voit kutsua addColorStop() -menetelmää useita kertoja muuttaaksesi väriä siirtymää. Jos et käytä gradient-objektia tätä menetelmää, väriä siirtymä ei ole näkyvissä. Näkyvän väriä siirtymän saamiseksi sinun täytyy luoda vähintään yksi värimerkki.
Esimerkki
Esimerkki 1
Määritä mustasta valkoiseen siirtymästä muodostuva väriäsiirtymä, joka toimii suorakulmion täyttötyylinä:
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);
Vinkki:Lisää esimerkkejä sivun alasta.
syntaksi
gradient.addColorStop(stop,color);
parametrien arvot
| parametrit | kuvaus |
|---|---|
| stop | Arvo, joka on välillä 0.0 ja 1.0, ja joka edustaa väriä siirtymän alussa ja lopussa. |
| color | CSS-väriarvo, joka näytetään lopussa. |
Lisää esimerkkejä
Esimerkki 2
Määritä väriä siirtymää varten useita addColorStop() -menetelmiä:
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);
Selaimen tuki
Taulukon numerot osoittavat ensimmäisen täysin tukevan kyseisen ominaisuuden selaimen version.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas> -elementtiä.
