HTML canvas createRadialGradient() metod

HTML5 Canvas-handbok

Definition och användning

createLinearGradient() metoden skapar ett radialt/cirkulärt gradientobjekt.

Gradienter kan användas för att fylla rektanglar, cirklar, linjer, text och mycket mer.

Tips:Använd detta objekt som strokeStyle eller fillStyle egenskapsvärdet.

Tips:Använd addColorStop() Metoden specificerar olika färger och var de är placerade i gradient-objektet.

Exempel

Rita en rektangel och fyll den med en radial/cirkulär gradient:

Din webbläsare stöder inte HTML5 canvas-tagg.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fyll med gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);

Prova själv

Syntaks

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

Parametervärde

Parameter Beskrivning
x0 Startcirkelns x-koordinat
y0 Startcirkelns y-koordinat
r0 Startcirkelns radie
x1 Avslutande cirkelns x-koordinat
y1 Avslutande cirkelns y-koordinat
r1 Avslutande cirkelns radie

Webbläsarstöd

Numrerna i tabellen anger den första versionen av webbläsaren som helt stöder denna 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 tidigare versioner stöder inte <canvas>-elementet.

HTML5 Canvas-handbok