Canvas addColorStop() Methode
Definitie en gebruik
addColorStop() De methode bepaalt de kleur en positie in het gradient object.
addColorStop() methoden samen met createLinearGradient() of createRadialGradient() Gebruik samen
Note:U kunt de addColorStop() methode meerdere keren aanroepen om de overgang te veranderen. Als u de gradient object niet gebruikt met deze methode, zal de overgang niet zichtbaar zijn. Om een zichtbare overgang te krijgen, moet u ten minste een kleurenpunt aanmaken.
Voorbeeld
Voorbeeld 1
Definieer een overgang van zwart naar wit als de invulstijl van het rechthoekig gebied:
JavaScript:
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"zwart");
grd.addColorStop(1,"wit");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Tip:Meer voorbeelden zijn beschikbaar aan de onderkant van de pagina.
Syntaxis
gradient.addColorStop(stop,kleur);
Parameterwaarde
| Parameter | Beschrijving |
|---|---|
| stop | Een waarde tussen 0.0 en 1.0, die de positie tussen het begin en het einde van de verandering aangeeft. |
| kleur | De CSS kleurwaarde weergegeven aan het einde. |
Meer voorbeelden
Voorbeeld 2
Gebruik meerdere addColorStop() methoden om de verandering te definiëren:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"zwart");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blauw");
grd.addColorStop("0.6","groen");
grd.addColorStop("0.8","geel");
grd.addColorStop(1,"rood");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Browserondersteuning
De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
