Méthode createRadialGradient() de Canvas
Définition et utilisation
createLinearGradient() La méthode crée un objet de dégradé radial/circulaire.
La dégradé peut être utilisée pour remplir des rectangles, des cercles, des lignes, du texte, etc.
Avis :Utilisez cet objet comme strokeStyle ou fillStyle La valeur de l'attribut.
Avis :Utilisez addColorStop() La méthode spécifie différentes couleurs et où localiser les couleurs dans l'objet gradient.
Exemple
Dessinez un rectangle et remplit-le avec une 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");
// Remplir avec dégradé
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
Syntaxe
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Valeur du paramètre
| Paramètres | Description |
|---|---|
| x0 | Coordonnée x du cercle de début de la dégradation. |
| y0 | Coordonnée y du cercle de début de la dégradation. |
| r0 | Rayon du cercle de début. |
| x1 | Coordonnée x du cercle de finition de la dégradation. |
| y1 | Coordonnée y du cercle de finition de la dégradation. |
| r1 | Rayon du cercle de finition. |
Support du navigateur
Les nombres dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.
