Dégradés HTML Canvas

Canvas - 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 le canvas ne sont pas limitées à des couleurs pures.

Il y a deux types de dégradés différents :

• createLinearGradient(x,y,x1,y1) - Créer un dégradé linéaire
• createRadialGradient(x,y,r,x1,y1,r1) - Créer un dégradé radial/circulaire

Une fois que nous avons l'objet de dégradé, nous devons ajouter deux ou plus couleurs-étiquettes.

La méthode addColorStop() spécifie les points d'arrêt des couleurs et leur position le long du dégradé. La position du dégradé peut être n'importe quel nombre entre 0 et 1.

Pour utiliser un dégradé, configurez l'attribut fillStyle ou strokeStyle en dégradé et dessinez une forme (rectangle, texte ou ligne).

Utilisation de createLinearGradient()

Exemple

Créer un dégradé linéaire. Remplir un rectangle avec un dégradé :

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Créer un dégradé
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Utiliser un dégradé pour remplir
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. Remplir un rectangle avec un dégradé :

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Créer un dégradé
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Utiliser un dégradé pour remplir
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Essayez-le vous-même

Veuillez également consulter :

Manuel complet de Canvas sur CodeW3C.com