Canvas createRadialGradient() Méthode
Exemple
Dessinez un rectangle rempli d'un dégradé radial/circulaire :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Créer un dégradé radial
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Dessiner un rectangle rempli
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 100); Description
La méthode createRadialGradient() crée un objet de dégradé radial/circulaire.
Cet objet de dégradé peut être utilisé pour remplir des rectangles, des cercles, des lignes, du texte, etc.
L'objet de dégradé peut également être utilisé comme valeur pour les propriétés strokeStyle ou fillStyle .
Remarque
Vous devez ajouter un point d'arrêt de couleur à un objet de dégradé pour le rendre visible.
Voir aussi :
La méthode createLinearGradient() (Créer un objet de dégradé)
La méthode addColorStop() (Ajouter un point d'arrêt de dégradé)
La propriété fillStyle (Définir la couleur/style de remplissage)
La propriété strokeStyle (Définir la couleur/style de contour)
Syntaxe
| context .createRadialGradient( x0, y0, r0, x1, y1, r1 ) |
Valeurs des paramètres
| Paramètre | Description |
|---|---|
| x0 | La coordonnée x du cercle de départ du dégradé |
| y0 | La coordonnée y du cercle de départ du dégradé |
| r0 | Le rayon du cercle de départ |
| x1 | La coordonnée x du cercle de fin du dégradé |
| y1 | La coordonnée y du cercle de fin du dégradé |
| r1 | Le rayon du cercle de fin |
Valeur de retour
| context .createRadialGradient( x0, y0, r0, x1, y1, r1 ) |
Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
La méthode createRadialGradient() est prise en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |