Partager via

Démarrage rapide : dessin sur une zone de dessin (HTML)

  • Article

[ 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 ]

L’élément de zone de dessin produit sur votre page une zone de dessin bitmap rectangulaire dans laquelle vous pouvez utiliser JavaScript pour dessiner des images à la volée. La zone de dessin est idéale pour créer des jeux ou toute situation dans laquelle vous générez des graphismes en temps réel ou vous modifiez ceux-ci régulièrement.

Ce guide de démarrage rapide contient les sections suivantes :

  • Prérequis
  • Élément de zone de dessin
  • Rendu des contextes
  • Dessin de rectangles
  • Utilisation des chemins
  • Dessin d’arcs
  • Dessin de courbes
  • Courbe quadratique
  • Courbe cubique de Bézier
  • Étapes suivantes

Prérequis

Dans cette rubrique, nous partons du principe que vous savez créer une application du Windows Store de base en JavaScript qui reprend le modèle Bibliothèque Windows pour JavaScript et que vous avez acquis les notions de base de HTML et de 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.

Élément de zone de dessin

L’élément de zone de dessin produit sur votre page une zone de dessin bitmap rectangulaire dans laquelle vous pouvez utiliser JavaScript pour restituer des images à la volée.

L’élément de zone de dessin possède les attributs width et height. Ces deux attributs sont facultatifs et peuvent être définis à l’aide de propriétés du modèle DOM (Document Object Model). Si vous ne définissez pas les attributs width et height, la zone de dessin présente la taille par défaut de 300 pixels de large pour 150 pixels de haut.

<canvas id="canvas" width="150" height="150"></canvas>

L’attribut id ne fait pas partie de l’élément de zone de dessin, mais il permet d’identifier celui-ci dans votre script.

Vous pouvez définir la taille de la zone de dessin à l’aide de feuilles de style en cascade (CSS). Par défaut, votre application restitue l’élément de zone de dessin sans contenu, ni bordure : l’élément est complètement transparent. Toutefois, vous pouvez le styliser à l’instar de toute image ordinaire en spécifiant une marge, une bordure, un arrière-plan, etc. La stylisation n’affecte pas le dessin proprement dit sur la zone de dessin.

Rendu des contextes

L’ajout d’un élément de zone de dessin à votre application se traduit simplement par la création d’une surface de dessin transparente. Pour dessiner sur la zone de dessin, vous utilisez un contexte de rendu que vous obtenez à partir de la zone de dessin. 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.

Pour obtenir un contexte de rendu, vous appelez la méthode getContext de la zone de dessin, comme l’illustre l’exemple suivant :

var canvas = document.getElementById("quickstart");
var context = canvas.getContext("2d");

Dans notre exemple, nous commençons par utiliser getElementById pour récupérer le nœud DOM de la zone de dessin, puis nous utilisons la méthode getContext pour accéder au contexte de rendu. La méthode getContent prend comme paramètre le type de contexte. Dans notre exemple, il s’agit de « 2d ».

Après avoir obtenu un contexte de rendu, vous pouvez l’utiliser pour dessiner. Les sections suivantes expliquent comment dessiner différents types de formes.

Dessin de rectangles

Il existe deux fonctions qui permettent de dessiner des rectangles sur une zone de dessin :

  • fillRect

    fillRect (x, y, width, height)

    La méthode dessine un rectangle rempli.

    Les paramètres x et y représentent les coordonnées de la position du rectangle sur la zone de dessin, par rapport au coin supérieur gauche de celle-ci. La largeur et la hauteur sont mesurées en pixels.

  • strokeRect

    strokeRect(x, y, width, height)

    Les paramètres strokeRect sont les mêmes que ceux de fillRect. La différence est que strokeRect dessine uniquement le contour d’un rectangle.

Cette méthode colorie une forme spécifiée :

  • fillStyle

    fillStyle = color

    La méthode fillStyle utilise un seul paramètre pour remplir une forme d’une couleur. La couleur peut être définie à l’aide du système RVB, d’une couleur prédéfinie, telle que « red » ou « blue », d’une couleur hexadécimale, voire d’un dégradé. Pour des illustrations de fillStyle, voir l’exemple Dessin de rectangles ci-après.

Cette méthode efface la zone spécifiée et la rend entièrement transparente :

  • clearRect

    clearRect(x, y, width, height)

    Comme dans le cas des méthodes fillRect et strokeRect, les paramètres x et y de la méthode clearRect permettent de positionner la zone rectangulaire à effacer et de définir la largeur et la hauteur du rectangle.

Exemple

Commençons par un exemple qui produira une zone de dessin et qui dessinera deux carrés remplis, en l’occurrence un carré or et un carré violet transparent. Une feuille de style en cascade permettra de créer une bordure noire autour de la zone de dessin :

Deux carrés remplis

L’exemple débute par la déclaration d’un élément de zone de dessin dans la balise <body> du code HTML. L’élément de zone de dessin reçoit un attribut id appelé « canvas », et les attributs height et width de l’élément sont définis sur 100 pixels :

<body>
   <canvas id="canvas" width="100" height="100" />
</body>

L’élément de la zone de dessin est créé avec une largeur d’un pixel, et sa bordure noire unie est obtenue à l’aide d’une feuille de style en cascade. Pour que le chargement de fichier soit aussi efficace que possible, la feuille de style en cascade doit se trouver dans un fichier externe :

/* style the canvas element with a black border. */
canvas { border: 1px solid black; }

Notre code JavaScript, qui dessine sur la zone de dessin les deux rectangles remplis, se trouve également dans un fichier externe. Une fois le document HTML chargé, ce code s’exécute pour appeler la fonction draw à l’aide du gestionnaire d’événements window.onload.

window.onload = draw;

La méthode draw récupère l’élément de la zone de dessin à l’aide de la méthode getElementById. Elle appelle ensuite la méthode getContext pour récupérer le contexte de dessin. Vous devez transmettre la chaîne « 2d » à la méthode getContext.

Chaque zone de dessin possède un contexte de dessin. Le contexte de dessin est l’endroit où sont définies toutes les méthodes et propriétés de dessin.

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D drawing context.
var context = canvas.getContext("2d");

Pour commencer le dessin du premier carré, il convient de définir la propriété fillStyle sur une couleur. Il existe plusieurs façons de remplir un rectangle. Dans notre exemple, nous utilisons l’équivalent RVB de la couleur or :

context.fillStyle = "rgb(255, 215, 0)";

Voici d’autres façons de définir la propriété fillStyle.

  • Sous réserve de disponibilité, vous pouvez utiliser des couleurs prédéfinies telles que "yellow", "orange", "purple" :

    context.fillStyle = "gold";

  • Vous pouvez aussi utiliser la représentation hexadécimale du format de couleur #RRGGBB :

    context.fillStyle = "#FFD700";

    Ce nombre hexadécimal correspond à une couleur or profond.

  • Bien que cela ne soit pas considéré comme une couleur, vous pouvez utiliser un dégradé pour votre propriété fillStyle :

    var myGradient=context.createLinearGradient(20, 20, 100, 0);

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

context.fillStyle = myGradient;

    Cet exemple crée un dégradé linéaire, définit les délimitations de couleurs et applique au rectangle dessiné une couleur allant progressivement du jaune paille au blanc.

    Deux carrés remplis

  • La valeur par défaut de la propriété fillStyle est noir uni.

Ensuite, nous passons au dessin proprement dit du rectangle à l’aide de la méthode fillRect. Les valeurs de la méthode fillRect commencent le dessin d’un rectangle rempli en définissant les coordonnées x et y du coin supérieur gauche du rectangle au point 15, 15. Les coordonnées x et y sont exprimées par rapport au coin supérieur gauche de la zone de dessin. La largeur et la hauteur du rectangle sont définies à 55 et 50 pixels, respectivement :

context.fillRect (15, 15, 55, 50);

Pour le second rectangle, la propriété fillStyle est définie sur l’équivalent RVB du violet. La quatrième valeur, la lettre « A », ou Alpha, du paramètre RGBA, est définie sur 0.5 et détermine l’opacité de la couleur. Les valeurs Alpha valides vont de 0.0 (entièrement transparent) à 1.0 (entièrement opaque) :

context.fillStyle = "rgba(0, 0, 200, 0.5)"

Les valeurs de la méthode fillRect commencent le dessin en définissant les coordonnées x et y du coin supérieur gauche du rectangle au point 40, 40. La largeur et la hauteur du rectangle sont définies à 45 et 40 pixels, respectivement :

context.fillRect (40, 40, 45, 40);

Voici les exemples de code complets :

Le code JavaScript est le suivant. Dans notre exemple, ce fichier est nommé myJavascript.js :

window.onload = draw;   

// This function is called on page load.
function draw() {

    // Get the canvas element.
    var canvas = document.getElementById("canvas");

    // Specify a 2d drawing context.
    var context = canvas.getContext("2d");

    // Set the color to the RGB equivalent of gold.
    context.fillStyle = "rgb(255, 215, 0)";

    // Draw the rectangle.
    context.fillRect (15, 15, 55, 50);

    // Set the color to the RGB equivalent of purple and
    // set the opacity of the rectangle to 50 percent.
    
    context.fillStyle = "rgba(0, 0, 200, 0.5)"

    // Draw the rectangle.
    context.fillRect (40, 40, 45, 40);
}

Voici le fichier HTML :

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

Utilisation des chemins

La méthode beginPath démarre un nouveau chemin et utilise des méthodes supplémentaires telles que moveTo, lineTo ou arc pour dessiner une combinaison de lignes, de courbes et d’autres formes.

Une fois qu’un chemin a été créé, vous pouvez utiliser les méthodes fillStyle ou strokeStyle pour restituer le chemin sur la zone de dessin.

Exemple

L’exemple suivant dessine un triangle marron :

Triangle rempli

Nous allons utiliser les mêmes fichiers HTML et CSS que pour le premier exemple. Dans notre fichier JavaScript myJavascript, nous allons utiliser la même fonction draw et l’appeler une fois le fichier HTML chargé.

Après avoir récupéré l’élément de zone de dessin et spécifié un type de zone de dessin 2D, nous commençons à dessiner le triangle marron en appelant la méthode beginPath.

context.beginPath();

De manière interne, les chemins sont stockés dans une liste de sous-chemins (lignes, arcs, etc.) qui composent une forme. Chaque fois que la méthode beginPath est appelée, la liste est redéfinie et nous pouvons commencer à dessiner de nouvelles formes.

Avant de dessiner toute ligne, vous devez appeler la fonction moveTo. La fonction moveTo ne dessine rien ; elle revient à placer un crayon ou un pinceau là où vous souhaitez commencer à dessiner le triangle.

context.moveTo(28, 20);

La méthode moveTo prend deux arguments : les coordonnées x et y. Dans notre exemple, nous avons défini la coordonnée x sur 28 et la coordonnée y sur 20. Les coordonnées sont exprimées par rapport à la bordure de la zone de dessin sur laquelle vous dessinez.

À présent, nous allons dessiner les lignes du triangle à l’aide de la fonction lineTo. À l’image de la fonction moveTo, la fonction lineTo possède deux arguments, les coordonnées x et y, qui représentent les extrémités de la ligne que nous dessinons :

context.lineTo(78, 50); 
context.lineTo(28, 78); 
context.lineTo(28, 20);

Dans notre exemple, nous définissons la propriété fillStyle sur la valeur hexadécimale représentant la couleur marron. Comme indiqué dans la section Dessin de rectangles, la propriété fillStyle peut être une couleur RVB, une couleur hexadécimale, une couleur prédéfinie ou un dégradé.

context.fillStyle = "#996633";

Nous utilisons la propriété fillStyle pour peindre le triangle en marron uni. Nous pourrions utiliser la fonction strokeStyle, qui ne peindrait que le contour de la forme.

À présent, dessinons la forme triangulaire.

context.fill();

Voici le code JavaScript complet :

    // Get the canvas element.
    var canvas = document.getElementById("canvas");

    // Specify a 2-D canvas type.
    var context = canvas.getContext("2d");
           
    // Add the brown triangle.
    context.beginPath();
    context.moveTo(28, 20);
    context.lineTo(78, 50); 
    context.lineTo(28, 78); 
    context.lineTo(28, 20); 
          
    // Set the color to the hexadecimal equivalent of brown.
    // Omit this step and the triangle will render 
    // the default color of black.
    context.fillStyle = "#996633";

    // Draw the triangle.
    context.fill();

Dessin d’arcs

Pour dessiner des arcs ou des cercles, nous utilisons la méthode arc :

context.arc(x, y, radius, startingAngle, endingAngle, antiClockwise);

Cette méthode prend cinq paramètres :

  • x et y sont les coordonnées du centre du cercle.
  • Le rayon est la distance entre le centre du cercle et un point sur le cercle.
  • Les paramètres startingAngle et endingAngle définissent en radians les points de départ et final sur l’arc, par rapport à l’axe x.
  • Le paramètre anticlockwise est une valeur booléenne qui, lorsqu’elle vaut true, dessine l’arc dans le sens inverse des aiguilles d’une montre ; sinon, l’arc est dessiné dans l’autre sens.

Exemple

L’exemple suivant dessine un cercle bleu.

Cercle bleu

Après avoir récupéré l’élément de zone de dessin et spécifié un type de zone de dessin 2D, nous commençons à dessiner le cercle en appelant la méthode beginPath.

context.beginPath();

Dans les exemples précédents du rectangle et du triangle, nous avons utilisé la fonction fillStyle pour remplir et colorier les formes. Dans cet exemple, nous définissons la couleur RVB sur bleu et dessinons uniquement le contour du cercle à l’aide de la propriété strokeStyle.

// Define the stroke color in RGB for blue.
context.strokeStyle = "rgb(0, 162, 232)";

La fonction arc est définie comme suit :

// Define the circle using an arc.
context.arc(50, 50, 32, 0, 2 * Math.PI, true);

Où :

  • les coordonnées x et y placent le centre du cercle aux points 50, 50, respectivement ;
  • le rayon du cercle est défini sur 32 ;
  • le début et la fin du cercle sont définis sur 0 et "2 * Math.PI" radians, ce qui représente un cercle complet.
  • le paramètre anticlockwise est défini sur true, ce qui n’est pas très important pour dessiner un cercle complet, mais qui le serait vraiment pour une partie d’un arc.

Enfin, la fonction stroke est utilisée pour dessiner le cercle que nous venons de définir :

// draw the circle.
context.stroke();

Voici ce à quoi ressemblerait notre cercle si nous ne dessinions que la moitié de l’arc, ou de zéro à Math.PI :

// Define the circle using an arc.
context.arc(50, 50, 32, 0, Math.PI, true);

Tracé d’un demi-cercle

Le code JavaScript est le suivant. Là encore, ce code se trouverait dans une fonction draw appelée après le chargement de la page HTML. Pour un exemple complet des fichiers HTML ou JavaScript, voir la section Dessin de rectangles.

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
          
// Start the path.
context.beginPath();

// Define the stroke color in RGB for blue.
context.strokeStyle = "rgb(0, 162, 232)";

// Define the circle using an arc.
context.arc(50, 50, 32, 0, 2 * Math.PI, true);

// draw the circle.
context.stroke();

Dessin de courbes

Les courbes permettent de dessiner des formes complexes. Il existe deux types de courbes : la courbe de Bézier, ou cubique, et la courbe quadratic. Les deux courbes ont un point de départ et un point final sur la zone de dessin ; toutefois, le dessin proprement dit de chaque courbe dépend d’un ou de plusieurs points de contrôle. La courbe quadratic possède un seul point de contrôle, tandis que la courbe de Bézier cubique en utilise deux. Les courbes se trouvent systématiquement dans un chemin.

Courbe quadratique

Voici la méthode quadraticCurveTo :

quadraticCurveTo(cp1x, cp1y, X, Y)

Les quatre paramètres sont deux paires de coordonnées x, y ; la première paire (cp1x et cp1y) représente l’emplacement du point de contrôle sur la courbe, tandis que la seconde désigne l’emplacement de la fin de la courbe.

Comme toutes les formes, la courbe est démarrée à l’aide d’une méthode moveTo(x, y) qui fournit les coordonnées x et y du départ de la courbe.

Deux tangentes fictives sont dessinées entre les extrémités et le point de contrôle. Une ligne dessine la courbe par rapport à la tangente :

Point de contrôle avec quadrant

Exemple

L’exemple suivant utilise une série de méthodes quadraticCurveTo pour dessiner une figure abstraite ayant une base ondulée. Plus les points de contrôle sont proches de l’extrémité, plus la courbe devient petite dans la base ondulée.

Courbe quadratique

Nous commençons par récupérer l’élément de zone de dessin et spécifier un type de zone de dessin 2D. Ensuite, nous créons le chemin en appelant la méthode beginPath.

context.beginPath();

Ensuite, nous définissons notre point de départ pour la première courbe aux coordonnées x et y de 75 et 25, respectivement.

context.moveTo(75, 25);

Chacune des courbes quadratic est définie comme suit :

context.quadraticCurveTo(10, 80, 40, 130);
context.quadraticCurveTo(30, 90, 50, 130);
context.quadraticCurveTo(50, 100, 70, 130);
context.quadraticCurveTo(80, 110, 100, 130);
context.quadraticCurveTo(120, 120, 140, 130);

Où chacun des paramètres est :

  • cp1x
    Coordonnée x du point de contrôle.

  • cp1y
    Coordonnée y du point de contrôle.

  • x
    Coordonnée x du point final de la courbe.

  • y
    Coordonnée y du point final de la courbe.

Notez que l’ordre dans lequel les courbes sont dessinées est important. Vous pouvez supprimer une courbe ou deux, ou modifier l’ordre dans lequel elles sont dessinées pour voir comment elles sont construites.

Nous définissons la couleur sur vert en attribuant à la propriété fillStyle les valeurs RVB de la couleur vert.

context.fillStyle = "rgb(100, 200, 50)";

Enfin, la forme est coloriée à l’aide de la fonction fill :

context.fill();

Pour cet exemple, et pour le suivant, la taille de la zone de dessin a été portée à 150 par 150 pixels :

<canvas id="canvas" width="150" height="150" />

Voici l’exemple complet :

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
         
// Create the path.
context.beginPath();

// Set the starting point for the curve.
context.moveTo(75,25);

// Set each of the curves.        
context.quadraticCurveTo(10, 80, 40, 130);
context.quadraticCurveTo(30, 90, 50, 130);
context.quadraticCurveTo(50, 100, 70, 130);
context.quadraticCurveTo(80, 110, 100, 130);
context.quadraticCurveTo(120, 120, 140, 130);

// Set the color of the image to green.
context.fillStyle = "rgb(100, 200, 50)";

// Draw the image.
context.fill();

Courbe cubique de Bézier

Voici la méthode bezierCurveTo :

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Les six paramètres sont trois paires de coordonnées x, y ; la première paire (cp1x et cp1y) représente l’emplacement du premier point de contrôle sur la courbe, la deuxième (cp2x et cp2y) désigne l’emplacement du second point de contrôle, tandis que la troisième définit l’emplacement de la fin de la courbe.

La courbe commence aux coordonnées x et y indiquées dans la méthode moveTo(x, y).

Des tangentes fictives sont dessinées depuis les points de contrôle vers les extrémités. Une ligne dessine la courbe par rapport aux tangentes, comme le montrent les lignes violettes dans l’illustration suivante :

Points de contrôle de courbe cubique

Exemple

L’exemple suivant utilise une série de méthodes bezierCurveTo pour dessiner une figure abstraite ayant une base ondulée.

Exemple de courbe cubique

Après avoir récupéré l’élément de zone de dessin et spécifié un type de zone de dessin 2D, nous créons le chemin en appelant la méthode beginPath.

context.beginPath();

Ensuite, nous définissons notre point de départ pour la première courbe aux coordonnées x et y de 75 et 25, respectivement.

context.moveTo(75, 25);

Chacune des courbes Bézier cubiques est définie comme suit :

context.bezierCurveTo(10, 100, 10, 122, 20, 130);
context.bezierCurveTo(20, 100, 20, 122, 30, 130);
context.bezierCurveTo(40, 100, 40, 122, 50, 130);
context.bezierCurveTo(70, 100, 70, 122, 80, 130);
context.bezierCurveTo(110, 100, 110, 122, 120, 130);
context.bezierCurveTo(160, 100, 160, 122, 170, 130);

Où chacun des paramètres est :

  • cp1x
    Coordonnée x du premier point de contrôle Bézier.

  • cp1y
    Coordonnée y du premier point de contrôle Bézier.

  • cp2x
    Coordonnée x du second point de contrôle Bézier.

  • cp2y
    Coordonnée y du second point de contrôle Bézier.

  • x
    Coordonnée x du point final de la courbe.

  • y
    Coordonnée y du point final de la courbe.

Notez que l’ordre dans lequel les courbes sont dessinées est important. Vous pouvez supprimer une courbe ou deux, ou modifier l’ordre dans lequel elles sont dessinées pour voir comment elles sont construites.

Nous définissons la couleur sur rouge en attribuant à la propriété fillStyle les valeurs RVB de la couleur rouge.

context.fillStyle = "rgb(200, 0, 0)";

Enfin, la forme est coloriée à l’aide de la fonction fill :

context.fill();

Pour cet exemple, la taille de la zone de dessin a été portée à 150 par 150 pixels :

<canvas id="canvas" width="150" height="150" />

Voici l’exemple de code complet :

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");

// Create the path.
context.beginPath();

// Set the starting point for the curve.
context.moveTo(75, 25);
 
// Set each of the curves.
context.bezierCurveTo(10, 100, 10, 122, 20, 130);
context.bezierCurveTo(20, 100, 20, 122, 30, 130);
context.bezierCurveTo(40, 100, 40, 122, 50, 130);
context.bezierCurveTo(70, 100, 70, 122, 80, 130);
context.bezierCurveTo(110, 100, 110, 122, 120, 130);
context.bezierCurveTo(160, 100, 160, 122, 170, 130);

// Set the color of the image to red.
context.fillStyle = "rgb(200, 0, 0)";

// Draw the image.
context.fill();

Étapes suivantes

Dans ce guide de démarrage rapide, nous avons ajouté un élément de zone de dessin pour créer une surface de dessin transparente, créé une bordure autour de celle-ci à l’aide d’une feuille de style en cascade et utilisé JavaScript pour y dessiner des images.

Nous avons obtenu un contexte de dessin 2D à partir de l’élément de zone de dessin, ce qui nous a permis de définir la méthode fillRect et la propriété fillStyle pour dessiner des rectangles. Pour colorier les graphismes, nous avons défini la propriété fillStyle de différentes façons ; par exemple, nous avons utilisé des valeurs RVB, des valeurs hexadécimales, des couleurs prédéfinies et un dégradé.

Nous avons vu que la méthode beginPath permet de démarrer un nouveau chemin et d’utiliser des méthodes supplémentaires telles que moveTo, lineTo ou arc pour dessiner une combinaison de lignes, de cercles et de courbes.

Une fois le chemin créé, nous avons utilisé les méthodes fillStyle et strokeStyle pour restituer le chemin sur la zone de dessin.

Au cours de la prochaine étape, vous allez apprendre à animer les graphismes de la zone de dessin et à créer un dégradé.

Comment animer les graphiques d’une zone de dessin

Comment créer un dégradé