Exemplu
Desenați un dreptunghi și umple cu un gradient radial / circular:
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");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100); Încearcă - l singur » Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin metoda.
| Metodă | |||||
|---|---|---|---|---|---|
| createRadialGradient() | da | 9 | da | da | da |
Definiție și utilizare
createRadialGradient() metoda creează un obiect gradient radial / circular.
Gradientul poate fi folosit pentru a umple dreptunghiuri, cercuri, linii, text etc.
Tip: Utilizați acest obiect ca valoare la strokeStyle sau stil de fișier proprietăți.
Tip: Utilizați addColorStop() metoda pentru a specifica culori diferite, și în cazul în care pentru a poziționa culorile în obiectul de gradient.
| sintaxa JavaScript: | context . createRadialGradient( x0,y0,r0,x1,y1,r1 ) ; |
|---|
Valorile parametrilor
| Parametru | Descriere |
|---|---|
| x0 | Coordonata X a cercului de pornire al gradientului |
| y0 | Y coordonata a cercului de pornire al gradientului |
| r0 | Raza cercului de pornire |
| x1 | Coordonata X a cercului final al gradientului |
| y1 | Y coordonata a cercului final al gradientului |
| r1 | Raza cercului se termină |