Canvas createRadialGradient() metod
Definition och användning
createLinearGradient() metoden för att skapa radial/cirkulär gradientobjekt.
Gradationer kan användas för att fylla rektanglar, cirklar, linjer, text och mycket mer.
Tips:Använd detta objekt som strokeStyle eller fillStyle egenskapens värde.
Tips:Använd addColorStop() Metoden specificerar olika färger och var i gradientobjektet färgerna är placerade.
Exempel
Rita en rektangel och fyll den med en radial/cirkulär gradation:
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 gradation
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
Syntax
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Parametervärde
| Parameter | Beskrivning |
|---|---|
| x0 | Startcirkelns x-koordinat för gradation. |
| y0 | Startcirkelns y-koordinat för gradation. |
| r0 | Startcirkelns radie. |
| x1 | Avslutande cirkelns x-koordinat för gradation. |
| y1 | Avslutande cirkelns y-koordinat för gradation. |
| r1 | Avslutande cirkelns radie. |
Webbläsarstöd
Numr i tabellen anger den första webbläsarens version som helt stöder egenskapen.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Anmärkning:Internet Explorer 8 och tidigare versioner stöder inte <canvas>-elementet.
