Exemple
Dessinez un rectangle et remplir avec un dégradé radial / circulaire:
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); Essayez - le vous - même » support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui soutient pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| createRadialGradient() | Oui | 9.0 | Oui | Oui | Oui |
Définition et utilisation
Le createRadialGradient() méthode crée un objet dégradé radial / circulaire.
Le gradient peut être utilisé pour remplir des rectangles, des cercles, des lignes, du texte, etc.
Astuce: Utilisez cet objet comme la valeur aux strokeStyle ou fillStyle propriétés.
Astuce: Utilisez le addColorStop() méthode pour spécifier des couleurs différentes, et où positionner les couleurs de l'objet de gradient.
| Syntaxe JavaScript: | context.createRadialGradient(x0,y0,r0,x1,y1,r1); |
|---|
Paramètre valeurs
| Paramètre | La description |
|---|---|
| x0 | La coordonnée x du cercle de départ du gradient |
| y0 | La coordonnée y du cercle de départ du gradient |
| r0 | Le rayon du cercle de départ |
| x1 | La coordonnée x du cercle de fin du gradient |
| y1 | La coordonnée y du cercle de fin du gradient |
| r1 | Le rayon du cercle se terminant |