Comment créer un dégradé (HTML)

Article
03/04/2016

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Les formes et lignes se limitent à des aplats de couleurs. Le dégradé utilisé dans une zone de dessin est en fait un type de valeur de couleur et peut donc être appliqué aux propriétés fillStyle et strokeStyle.

Les dégradés peuvent être utilisés pour modifier l’intensité ou la couleur d’une image. Ils sont particulièrement indiqués pour produire des images d’arrière-plan, indiquer l’altitude sur une carte ou ajouter de la lumière et des ombres à une surface.

Les dégradés sont utiles dans les applications Web puisqu’ils permettent d’éviter l’utilisation d’images pour ces effets et de minimiser la bande passante et le temps nécessaire à les télécharger. Et comme ils sont produits par programme, ils peuvent facilement être redimensionnés et réutilisés.

Prérequis

Cette rubrique suppose que vous savez créer une application du Windows Store de base en JavaScript qui reprend le modèle Bibliothèque Windows pour JavaScript. Pour obtenir des instructions lors de la création de votre première application du Windows Store en JavaScript, voir Créer votre première application Web. Pour obtenir des instructions sur l’utilisation du modèle WinJS, voir Comment obtenir et utiliser le kit de ressources WinJS.

Instructions

Étape 1: Obtenir le contexte de rendu

Avant de dessiner une image sur notre zone de dessin et de la colorer avec un dégradé, nous devons obtenir le contexte de rendu à partir de l’élément de la zone de dessin. Toutes les méthodes et propriétés de la zone de dessin sont définies sur le contexte de rendu.

Pour améliorer les performances de l’application du Windows Store en JavaScript, attendez la fin du chargement de la page HTML avant d’exécuter le code JavaScript. Pour ce faire, placez le code qui va dessiner l’image dans une fonction qui est appelée après le chargement de la page.
```
window.onload = drawGradient;   

function drawGradient() {...
```
Utilisez getElementById pour récupérer le nœud DOM (Document Object Model) de la zone de dessin, puis utilisez la méthode getContext pour accéder au contexte de rendu.

Il existe différents types de contextes de rendu qui vous permettent de dessiner de différentes façons. Par exemple, il existe un contexte 2D pour les graphismes 2D et un contexte 3D pour les graphismes 3D. Les exemples proposés dans cette rubrique utilisent le contexte de rendu 2D.
```
    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");
```

Étape 2: Créer le dégradé

Une fois que vous avez le contexte de rendu, vous pouvez définir le dégradé. Il existe deux types de dégradés : le dégradé linéaire ou droit et le dégradé radial ou circulaire.

Linear gradient

La méthode du dégradé linéaire utilise quatre arguments :

createLinearGradient(startX, startY, endX, endY)

Les deux premiers arguments sont la position x et y du début du dégradé, et les deux autres arguments sont la position x et y de la fin du dégradé.

Dégradé linéaire vertical

Dans cet exemple, la méthode createLinearGradient est affectée à la variable myGradient. Ce procédé est utile à l’étape suivante lors de l’ajout de couleurs au dégradé.
```
var myGradient=context.createLinearGradient(0, 0, 200, 0);
```
Pour créer un dégradé linéaire vertical, dont l’ombre s’étend d’un côté à l’autre, les coordonnées x-y du début du dégradé sont définies sur 0 et 0, tandis que ses coordonnées x-y de fin sont définies sur 200 et 0. Les valeurs y (2e et 4e paramètres) étant toutes deux égales à 0, les ombres du dégradé s’étendent de manière égale de la gauche vers la droite.
Dégradé horizontal.

Pour créer un dégradé dont l’ombre s’étend du haut vers le bas, définissez des valeurs x (1er et 3e paramètres) constantes et faites en sorte que les valeurs y (2e et 4e paramètres) commencent à zéro sur la hauteur de la zone de dessin.
```
var myGradient=context.createLinearGradient(0, 0, 0, 100);
```
Dégradé en diagonal.

Vous pouvez également créer des dégradés le long d’une diagonale. Dans cet exemple, les valeurs x et y varient toutes deux et sont respectivement définies à 200 et 100.
```
var myGradient=context.createLinearGradient(0, 0, 200, 100);
```

Radial gradient

La méthode createRadialGradient utilise six arguments :

createRadialGradient(startX, startY, startRadius, endX, endY, endRadius)

Où les paramètres sont :

startX et startY sont les coordonnées x-y du cercle de départ sur la zone de dessin.
startRadius est le rayon du cercle de départ.
endX et endY sont les coordonnées x-y du cercle de fin sur la zone de dessin.
endRadius est le rayon du cercle de fin.

Dégradé radial traditionnel.

Pour créer un dégradé radial "traditionnel", où la couleur se dégrade de manière égale d’un cercle à l’autre, vous devez définir les coordonnées x-y des deux cercles sur les mêmes valeurs et vous assurer que l’un des cercles du dégradé est plus grand que l’autre.
```
var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);
```
Emplacements de début et de fin différents

Dans l’exemple de dégradé radial précédent, les coordonnées x-y sont les mêmes pour l’emplacement de début et de fin à 52 et 50 respectivement et seule la taille du rayon de chaque cercle a augmenté, passant de 10 à 200. L’ombre du dégradé radial est ainsi centrée dans le cercle.

Si vous éloignez encore les emplacements de début et fin, vous obtenez un dégradé de forme conique qui s’étend sur la zone de dessin.
```
var myGradient = context.createRadialGradient(32, 30, 5, 60, 60, 50);
```
Dans cet exemple, les coordonnées x-y du cercle de départ sont 32 et 30, et le cercle a un rayon de 5. Et les coordonnées x-y du cercle de fin sont 60 et 60, avec un rayon plus grand de 50. Voici le résultat :

Étape 3: Définition de délimitations de couleur

Un dégradé possède plusieurs méthodes addColorStop :

addColorStop(offset, color)

Pour ajouter une délimitation de couleur, vous devez spécifier la couleur à appliquer et sa position le long du dégradé. Les positions peuvent se situer n’importe où entre 0, au début du dégradé et 1, à la fin du dégradé.

Dans notre exemple, l’élément myGradient var est utilisé pour définir l’élément addColorStop de 0 à 1, de sorte que le dégradé se répartit uniformément du blanc au noir.

myGradient.addColorStop(0,"white");
myGradient.addColorStop(1,"black");

Délimitations de plusieurs couleurs

Il est possible d’utiliser des délimitations de plusieurs couleurs. Dans cet exemple, un second élément addColorStop affecte une délimitation de couleur à mi-chemin sur le dégradé :
```
  myGradient.addColorStop(0,"orange");
  myGradient.addColorStop(.5, "green");
  myGradient.addColorStop(1, "blue");
```
On obtient ce dégradé :

Étape 4: Définition du style de remplissage

Avant de dessiner le dégradé, l’élément fillStyle doit être défini sur l’élément myGradient.

context.fillStyle = myGradient;

Enfin, on utilise la méthode fillRect pour dessiner l’image :

context.fillRect(0, 0, 200, 100);

Exemples complets

Dégradé linaire

Ce code JavaScript utilise un élément de la zone de dessin pour dessiner un rectangle puis utilise un dégradé linéaire en diagonal pour l’élément fillStyle du rectangle.

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");

    // Create a linear gradient.
    var myGradient=context.createLinearGradient(0, 0, 300, 100);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.
    context.fillStyle = myGradient;

    // Draw the rectangle.
    context.fillRect(0, 0, 200, 100);
}

Dégradé radial

Ce code JavaScript utilise un élément de la zone de dessin pour dessiner un cercle puis utilise un dégradé radial pour l’élément fillStyle du cercle.

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");
  
    // Create the radial gradient.
    var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.     
    context.fillStyle = myGradient;

    // Draw a circle.
    context.beginPath();
    context.arc(52, 50, 40, 0, Math.PI*2, true); 
    context.closePath();
    context.fill();
}

feuilles de style en cascade (CSS)

Ceci est un exemple de feuilles de style en cascade (CSS) qui crée une bordure grise autour d’un élément de la zone de dessin.

/* Style the canvas element with a grey border. */
canvas { border: 1px solid #c3c3c3; }

Fichier HTML

Ce fichier HTML crée un élément de dessin et utilise des fichiers JavaScript et CSS externes.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="myJavascript.js"></script>
        <link Rel="stylesheet" Href="myStyle.css" Type="text/css">
    </head>
    <body>
        <canvas id="canvas" width="200" height="100" />
    </body>
</html>

Rubriques associées

Démarrage rapide : dessin sur une zone de dessin

Optimisation des performances : code JavaScript

Partager via