Cette page vous a-t-elle été utile ?
Votre avis sur ce contenu est important. N'hésitez pas à nous faire part de vos commentaires.
Vous avez d'autres commentaires ?
1500 caractères restants
Exporter (0) Imprimer
Développer tout

Création de cartes avec canvas ou SVG

Cette rubrique compare l’utilisation de l’objet canvas (zone de dessin) et SVG pour créer des cartes interactives que vous pouvez afficher sur une page Web.

Elle contient deux exemples de code annotés autonomes qui démontrent les différents développements d’images de carte par canvas et SVG. Ces exemples de code sont rédigés en langage HTML5 et JavaScript. Ils expliquent les principes de base de la création d’une carte interactive destinée à une page Web, ainsi que le traitement des événements quand un utilisateur clique sur la carte. Les deux exemples vous montrent comment : tracer une carte croquis du lac Michigan avec les coordonnées (x, y) et définir une fonction pour répondre à un clic en affichant un message et en changeant la couleur de la carte. Le premier exemple de code explique comment l’élément canvas crée les composants de la carte avec des pixels en mode immédiat.immediate mode L’exemple de code SVG qui suit illustre la création par SVG de ces mêmes composants à l’aide de techniques graphiques axées sur les formes en mode retenu.retained mode Les commentaires techniques qui suivent chaque exemple détaillent le fonctionnement du code et proposent des liens pour obtenir plus d’informations. La comparaison finale récapitule les différences principales du développement d’une carte avec chacune de ces deux technologies.

Exemple de code canvas


<!DOCTYPE html>
<html>
  
  <head>
    <script type="text/javascript">
      // Global variables
      var canvas;
      var ctx;

      // This function is called when the page loads.


      function init() {

        // Initialize canvas and get context.
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");

        // Draw on the context.
        draw(ctx);
      }

      function draw(ctx) {

        // Draw on the canvas.
        // Get the drawing coordinates.
        makeLake();

        // Then fill and stroke the shape.
        // The fill is white.
        ctx.fillStyle = "white";
        ctx.fill();

        // The stroke is blue.
        ctx.strokeStyle = "blue";
        ctx.stroke();
      }

      function paintLake() {

        // If the shape is clicked, display a fact
        // and paint the lake.
        // Display a fact.
        alert("Lake Michigan is one of the five Great Lakes of America.");

        // Fill the lake with blue.
        ctx.fillStyle = "blue";
        ctx.fill();
      }

      function makeLake() {

        // These methods draw the shape of the lake.
        ctx.beginPath();
        ctx.moveTo(263.3, 11.3);
        ctx.lineTo(252, 28);
        ctx.lineTo(217.3, 28);
        ctx.lineTo(184, 74);
        ctx.lineTo(154, 123.3);
        ctx.lineTo(142, 170);
        ctx.lineTo(127.3, 214);
        ctx.lineTo(112.7, 252);
        ctx.lineTo(124, 284.7);
        ctx.lineTo(120, 318.7);
        ctx.lineTo(124, 356);
        ctx.lineTo(154, 389.3);
        ctx.lineTo(196.5, 356.7);
        ctx.lineTo(218.7, 318);
        ctx.lineTo(206, 240);
        ctx.lineTo(212.7, 182);
        ctx.lineTo(230.7, 121.3);
        ctx.lineTo(253.3, 103.3);
        ctx.lineTo(288, 74);
        ctx.lineTo(288, 23.3);
        ctx.closePath();
      }
    </script>
  </head>
  
  <body onload="init()">
    <h1>
      Lake Michigan
    </h1>
    <canvas id="canvas" width="400" height="400" onclick="paintLake()">
    </canvas>
    <p>
      Click on the lake to learn a fact about Lake Michigan.
    </p>
  </body>

</html>


Discussion sur l’exemple de code Canvas

Cet exemple de code canvas utilise un en-tête HTML5 standard, <!doctype html>, pour que les navigateurs puissent l’identifier comme faisant partie de la spécification HTML5.

La balise <canvas> est insérée dans la section body. Vous devez indiquer la largeur et la hauteur. De plus, un ID est attribué à la balise pour qu’elle puisse intégrer le modèle d’objet de document (DOM, Document Object Model). Vous devez également préciser la fonction appelée quand un utilisateur clique sur la zone de dessin.

La portion <script> de la page présente deux sections : l’une pour dessiner la carte, l’autre pour traiter l’événement du clic sur la carte.

Traçage de la carte

Canvas utilise des pixels en mode immédiat pour créer les images de la carte.immediate mode Quand vous commencez le traçage des contours de la carte du lac Michigan, la fonction init est appelée au chargement de la page. Elle trace la carte en deux étapes.

La première étape consiste en l’ajout de l’élément canvas au modèle d’objet de document (DOM, Document Object Model) et l’initialisation du contexte de dessin. Ensuite, la fonction draw est appelée.

La seconde étape représente le traçage des contours du lac Michigan sur la zone de dessin. L’opération consiste à commencer à un point donné et à tracer des lignes vers les autres points définis par un jeu de coordonnées (x, y). La fonction makeLake est appelée pour créer un parcours tracé par les méthodes moveTo et lineTo pour les rives du lac. La forme obtenue est ensuite remplie de blanc et ses contours coloriés en bleu.

Dans le cadre de cet exemple, Adobe Illustrator CS5 a servi à calculer les coordonnées. Il est ainsi facile de transférer des formes de carte à une forme utilisable par l’élément canvas. Pour bénéficier de cette technique, vous devez charger le plug-in AI2Canvas disponible sur le site http://visitmix.com/labs/ai2canvas/.

. Une carte satellite du lac Michigan est en premier lieu chargée dans Illustrator, et un nouveau calque est créé dessus. Le lac est ensuite tracé manuellement. Le calque est alors exporté (sans la carte satellite) grâce à AI2Canvas vers une page HTML. À partir de ce document HTML, les données sont copiées dans la fonction makeLake de cet exemple.

Traitement de l’événement du clic

La fonction paintLake est appelée quand l’utilisateur clique sur l’élément canvas. Un message d’alerte s’affiche alors et la forme de la zone de dessin est remplie de bleu. Il est supposé que la dernière forme créée à l’aide de closePath n’a pas changé. Chaque fois que vous créez un parcours, le précédent n’est alors plus le parcours actif. Les méthodes fill et stroke ne s’appliquent qu’au parcours actif.

Exemple de code SVG


<!DOCTYPE HTML>
<html>
  
  <head>
    <script type="text/javascript">
      // This function is called when the lake is clicked.


      function lakeColor() {

        // Display a fact.
        alert("Lake Michigan is one of the five Great Lakes of America.");

        // Get the SVG polygon element.
        var myLake = document.getElementById("lake");

        // Color it by changing the fill attribute.
        myLake.setAttribute("fill", "blue");
      }
    </script>
  </head>
  
  <body>
    <h1>
      Lake Michigan
    </h1>
    <!-- Create the main SVG element. -->
    <svg x="0" y="0" width="400" height="400">
      <!-- Add the polygon element. -->
      <polygon fill="white" stroke="blue" id="lake" onclick="lakeColor()" points="263.3,11.3 252,28 217.3,28 184,74 154,123.3 142,170 
      127.3,214 112.7,252 124,284.7 120,318.7 124,356 154,389.3 196.5,356.7 218.7,318 206,240 212.7,182 230.7,121.3 253.3,103.3 
      288,74 288,23.3 " />
    </svg>
    <p>
      Click on the lake to learn a fact about Lake Michigan.
    </p>
  </body>

</html>


Commentaires sur l’exemple de code SVG

Cet exemple utilise un en-tête HTML5 standard, <!doctype html>, pour que les navigateurs puissent l’identifier comme faisant partie de la spécification HTML5. Sachez que certains navigateurs ne prennent pas en charge cet aspect de HTML5, et les balises SVG sont alors traitées comme des balises HTML. Ce traitement s’appelle SVG en ligne.inline SVG

Traçage de la carte

SVG utilise le mode retenu pour créer les contours de la carte axés sur les formes.retained mode Pour commencer, placez une balise svg dans la section body de la page Web. Vous devez aussi indiquer la largeur et la hauteur du conteneur de dessin SVG. Un objet polygon est ensuite incorporé dans le conteneur SVG. Ce polygone présente un remplissage blanc, des traits (stroke) bleus et son ID est lake pour pouvoir être inclus dans le modèle d’objet de document (DOM, Document Object Model). L’attribut onclick du polygone doit indiquer la fonction lakeColor comme cible si l’utilisateur clique sur l’élément. Contrairement à l’exemple Canvas, SVG vous permet de répondre à des événements de clic sur chaque élément. Un clic hors du polygone n’est pas traité.

Dans le cadre de cet exemple, Adobe Illustrator CS5 a servi à calculer les coordonnées du polygone. Une carte satellite du lac Michigan est en premier lieu chargée dans Illustrator, et un nouveau calque est créé dessus. Le lac est ensuite tracé manuellement. Le calque est enregistré en tant que document SVG. À partir de ce document SVG, il est alors facile de copier la séquence de coordonnées vers l’élément du polygone de cet exemple.

Traitement de l’événement du clic

La section script dispose d’une fonction qui traite l’événement click quand vous cliquez sur le lac. La fonction lakeColor affiche un message d’alerte quand vous cliquez sur la forme du lac. Elle colorie aussi le lac en bleu en modifiant l’attribut polygon.

Récapitulatif de la comparaison

La principale différence entre les deux exemples de codes traités ici est la manière de créer les images et de les placer sur l’écran. Le système d’affichage graphique en mode retenu de SVG vous permet de créer tous les détails de la carte dans des balises semblables aux balises HTML dans la section body, puis de les modifier dans la section script en changeant les attributs de forme.retained mode La méthode de la zone de dessin requiert plus de code pour accomplir la même tâche, car les formes doivent être tracées dans le script, et la section body ne contient que la balise canvas de base. Dans cet exemple, le remplissage s’effectue par le biais de la méthode fillStyle, mais si une forme intermédiaire est utilisée, celle du lac doit alors être redessinée. De surcroît, canvas utilisant le mode immédiat, la forme ne peut pas être modifiée aussi facilement qu’une forme SVG.immediate mode

En général, SVG peut créer des cartes en utilisant moins de lignes que canvas. Dans les exemples de code utilisés dans cette comparaison, le code de la carte SVG contient 40 lignes, tandis que celui de canvas en présente 91. Les deux technologies sont prises en charge par Adobe Illustrator CS5, ce qui vous permet de créer votre carte dans Illustrator, puis de copier directement les données dans votre code HTML.

Rubriques associées

Comment choisir entre canvas et SVG pour créer des graphiques sur le Web

 

 

Afficher:
© 2015 Microsoft