Canvas addColorStop() metode

Canvas referencemanual

Definisjon og bruk

addColorStop() Metoden bestemmer fargen og posisjonen i gradient-objektet.

addColorStop() metoden med createLinearGradient() eller createRadialGradient() Bruk sammen

Bemærk:Du kan kalle addColorStop() metoden flere ganger for å endre overgangen. Hvis du ikke bruker denne metoden på gradient-objektet, vil overgangen ikke være synlig. For å få en synlig overgang, må du opprette minst en fargebase.

Eksempel

Eksempel 1

Definer en gradient fra svart til hvit som fyllmønster for rektangelet:

Din nettleser støtter ikke HTML5 canvas-taggene.

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);

Prøv det selv

Tips:Flere eksempler finnes på siden bunnen.

Syntaks

gradient.addColorStop(stop,color);

Parameterverdi

Parameter Beskrivelse
stop Verdier mellom 0.0 og 1.0, som representerer posisjonen mellom start og slutt i overgangen.
color CSS-fargeverdien som vises ved slutten.

Flere eksempler

Eksempel 2

Definer gradienten ved hjelp av flere addColorStop() metoder:

Din nettleser støtter ikke HTML5 canvas-taggene.

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);

Prøv det selv

Nettleserstøtte

Tallene i tabellen angiver den første nettleserversjonen som fullt ut støtter denne egenskapen.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Bemærk:Internet Explorer 8 og tidligere versioner understøtter ikke <canvas>-elementet.

Canvas referencemanual