Méthode HTML canvas createRadialGradient()
Définition et utilisation
createLinearGradient() La méthode createRadialGradient() crée un objet de dégradé radial/circulaire.
Le dégradé peut être utilisé pour remplir des rectangles, des cercles, des lignes, du texte, etc.
Avis :Utilisez cet objet en tant que strokeStyle ou fillStyle la valeur de l'attribut.
Avis :Utilisez addColorStop() La méthode spécifie différentes couleurs et où chaque couleur est positionnée dans l'objet gradient.
Exemple
Dessinez un rectangle et remplit-le 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, "rouge");
grd.addColorStop(1, "blanc");
// Remplir avec un 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égradé |
| y0 | Coordonnée y du cercle de début de la dégradé |
| r0 | Rayon de début du cercle |
| x1 | Coordonnée x du cercle de fin de la dégradé |
| y1 | Coordonnée y du cercle de fin de la dégradé |
| r1 | Rayon de fin du cercle |
Support du navigateur
Les numéros 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>.
