Exemple
Dessiner un rectangle et remplir avec un gradient 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 vous - même » Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| createRadialGradient() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Définition et utilisation
Le createRadialGradient() méthode crée un objet gradient radial / circulaire.
Le gradient peut être utilisé pour remplir des rectangles, des cercles, des lignes, du texte, etc.
Tip: Utilisez cet objet comme la valeur aux strokeStyle ou fillStyle propriétés.
Tip: Utiliser la 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 ) ; |
|---|
Les valeurs des paramètres
| 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 |
<Canvas objet