Toile - Dégradés
Dégradés peuvent être utilisés pour remplir des rectangles, des cercles, des lignes, du texte, etc. Formes sur la toile ne sont pas limitées aux couleurs unies.
Il existe deux types de gradients différents:
- createLinearGradient ( x,y,x1,y1 ) - crée un gradient linéaire
- createRadialGradient ( x,y,r,x1,y1,r1 ) - crée un radial / dégradé circulaire
Une fois que nous avons un objet de gradient, il faut ajouter deux ou plusieurs étapes de couleur.
Le addColorStop() méthode spécifie les étapes de couleur, et sa position le long du gradient. positions Gradient peuvent se situer entre 0 et 1.
Pour utiliser le gradient, définissez la propriété fillStyle ou strokeStyle au gradient, puis dessiner la forme (rectangle, text, or a line) .
À l' aide createLinearGradient()
Exemple
Créer un dégradé linéaire. Remplissez le rectangle avec le dégradé:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80); Essayez - le vous - même » Utilisation de createRadialGradient() :
Exemple
Créer un dégradé radial / circulaire. Remplissez le rectangle avec le dégradé:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
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,80); Essayez - le vous - même »