Dégradés de canevas HTML
Toile - Dégradés
Les dégradés peuvent être utilisés pour remplir des rectangles, des cercles, des lignes, du texte, etc. Les formes sur la toile ne sont pas limitées aux couleurs unies.
Il existe deux types de dégradés différents :
- createLinearGradient( x,y,x1,y1 ) - crée un dégradé linéaire
- createRadialGradient( x,y,r,x1,y1,r1 ) - crée un dégradé radial/circulaire
Une fois que nous avons un objet dégradé, nous devons ajouter deux arrêts de couleur ou plus.
La méthode addColorStop() spécifie les arrêts de couleur et sa position le long du dégradé. Les positions de dégradé peuvent être n'importe où entre 0 et 1.
Pour utiliser le dégradé, définissez la propriété fillStyle ou strokeStyle sur le dégradé, puis dessinez la forme (rectangle, texte ou ligne).
Utilisation de createLinearGradient()
Exemple
Créez un dégradé linéaire. Remplir 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);
Utilisation de createRadialGradient() :
Exemple
Créez un dégradé radial/circulaire. Remplir 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);