Méthode createRadialGradient()du canvas HTML
Exemples
Dessinez un rectangle et remplissez-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,"red");
grd.addColorStop(1,"white");
// Remplir avec un dégradé
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
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 un dégradé
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
Essayez-le vous-même »
Prise en charge des navigateurs
Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge la méthode createRadialGradient().
Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.
Définition et utilisation
La méthode createRadialGradient() crée un objet dégradé radial/circulaire.
Le dégradé peut être utilisé pour remplir des rectangles, des cercles, des lignes, du texte, etc.
Astuce :Veuillez utiliser cet objet comme valeur de la propriétéstrokeStyleoufillStyle.
Astuce :Veuillez utiliser la méthodeaddColorStop()pour spécifier différentes couleurs et où les couleurs sont positionnées dans l'objet gradient.
| Syntaxe JavaScript : | 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 d'arrivée du dégradé |
| y1 | La coordonnée y du cercle d'arrivée du dégradé |
| r1 | Le rayon du cercle d'arrivée |
Référence HTML canvas Autres extensions