Maîtriser les graphiques HTML Canvas

Introduction

La balise HTML <canvas> est utilisée pour dessiner des graphiques et d'autres éléments visuels sur une page web. Cette balise fournit une plateforme aux développeurs pour créer des jeux, des images et des animations à l'aide de JavaScript. L'élément canvas dispose de diverses attributs qui vous permettent de manipuler la taille, l'opacité et l'apparence du canvas.

Dans ce laboratoire, nous allons explorer comment utiliser la balise <canvas> en HTML pour créer des graphiques, ajouter des animations et manipuler des formes et du texte à l'aide de JavaScript.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70719{{"Dessin graphique HTML"}} html/head_elems -.-> lab-70719{{"Dessin graphique HTML"}} html/layout -.-> lab-70719{{"Dessin graphique HTML"}} html/doc_flow -.-> lab-70719{{"Dessin graphique HTML"}} html/multimedia -.-> lab-70719{{"Dessin graphique HTML"}} html/embed_media -.-> lab-70719{{"Dessin graphique HTML"}} html/inter_elems -.-> lab-70719{{"Dessin graphique HTML"}} end

Création d'un canvas simple

Créons un canvas simple en utilisant la balise <canvas> sans contenu. Dans le fichier index.html, écrivez le code suivant :

<!doctype html>
<html>
  <head>
    <title>Simple Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas"></canvas>
  </body>
</html>

Enregistrez le fichier et ouvrez-le dans votre navigateur. Vous remarquerez une zone blanche sur la page, qui est notre canvas avec une largeur par défaut de 300px et une hauteur de 150px.

Ajout de styles au canvas

Nous pouvons ajouter des styles à notre canvas en utilisant l'attribut style. Ajoutons une bordure à notre canvas pour que ses limites soient visibles.

<!doctype html>
<html>
  <head>
    <title>Styled Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
  </body>
</html>

Enregistrez le fichier et rafraîchissez votre navigateur pour voir le résultat.

Création de formes sur le canvas

Maintenant, ajoutons quelques graphiques à notre canvas. Pour ce faire, nous devons utiliser JavaScript. Nous pouvons utiliser la méthode getContext() pour obtenir un contexte de dessin 2D de notre canvas et effectuer diverses opérations dessus.

<!doctype html>
<html>
  <head>
    <title>Shapes on Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // Dessinez un rectangle
      ctx.fillStyle = "red";
      ctx.fillRect(50, 50, 100, 50);
    </script>
  </body>
</html>

Dans le code ci-dessus, nous obtenons d'abord l'élément canvas par son ID myCanvas, puis nous obtenons un contexte de dessin 2D en utilisant getContext(). Nous définissons ensuite la propriété fillStyle sur "red" pour remplir le rectangle d'une couleur rouge. Enfin, nous dessinons le rectangle en utilisant la méthode fillRect().

Enregistrez le fichier et rafraîchissez votre navigateur pour voir le résultat.

Ajout de texte au canvas

Ajoutons du texte à notre canvas à l'aide de JavaScript.

<!doctype html>
<html>
  <head>
    <title>Text on Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // Ajoutez du texte
      ctx.font = "30px Arial";
      ctx.fillStyle = "blue";
      ctx.fillText("Hello World", 50, 100);
    </script>
  </body>
</html>

Dans le code ci-dessus, nous obtenons d'abord l'élément canvas par son ID myCanvas, puis nous obtenons un contexte de dessin 2D en utilisant getContext(). Nous définissons ensuite la propriété font sur "30px Arial" et la propriété fillStyle sur "blue". Enfin, nous ajoutons le texte "Hello World" en utilisant la méthode fillText().

Enregistrez le fichier et rafraîchissez votre navigateur pour voir le résultat.

Animation de graphiques sur le canvas

Nous pouvons également créer des animations sur le canvas à l'aide de JavaScript et de la balise HTML <canvas>. Créons une animation de rectangle en mouvement sur notre canvas.

<!doctype html>
<html>
  <head>
    <title>Animated Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      let x = 20;
      let y = 20;
      const dx = 5;

      function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "red";
        ctx.fillRect(x, y, 50, 50);

        if (x + 50 > canvas.width || x < 0) {
          dx = -dx;
        }

        x += dx;
      }

      animate();
    </script>
  </body>
</html>

Dans le code ci-dessus, nous obtenons d'abord l'élément canvas par son ID myCanvas, puis nous obtenons un contexte de dessin 2D en utilisant getContext(). Nous déclarons ensuite quelques variables x et y pour stocker la position de notre rectangle. Nous déclarons également la variable dx pour déplacer le rectangle le long de l'axe x.

Nous créons ensuite une fonction animate() pour dessiner le rectangle sur l'écran. Nous utilisons la méthode clearRect() pour effacer les dessins précédents sur le canvas à chaque trame. Nous remplaçons ensuite le rectangle d'une couleur rouge en utilisant la méthode fillRect().

Nous vérifions ensuite si le rectangle est atteint les limites du canvas, et si c'est le cas, nous changeons la direction du mouvement en changeant la valeur de dx.

Enfin, nous appelons la méthode requestAnimationFrame() pour créer une boucle d'animation.

Enregistrez le fichier et rafraîchissez votre navigateur pour voir le rectangle animé.

Sommaire

Dans ce laboratoire, nous avons appris à utiliser la balise HTML <canvas> pour créer des graphiques et des animations sur une page web. Nous avons également appris à manipuler la taille, l'opacité et l'apparence du canvas à l'aide d'attributs et de styles. Nous avons ajouté des formes, du texte et des animations sur le canvas en utilisant JavaScript et la méthode getContext().