Skip to content
API

Développement API - Pierre Blarre

Canvas

Icône Présentation
✕
1 / 1

API client web - Canvas

Le <canvas> HTML5 est une zone de dessin qui permet de dessiner des graphiques, des animations et des jeux en utilisant Javascript.

L’API Canvas fournit l’interface de programmation pour dessiner des graphiques en 2D et en 3D sur une page web.

Dans ce premier exemple amusant, nous allons utiliser l’API Canvas pour créer une animation de balles rebondissantes dans un context en 2 dimensions.

Spécifications souhaitées

Dans un premier temps, voici les spécifications fonctionnelles que nous allons implémenter :

  • On veut afficher un canvas de la taille de la fenêtre du navigateur, contenant des balles qui rebondissent
  • La taille, vitesse, couleur et direction des balles doivent pouvoir être aléatoires
  • Les balles rebondiront sur les bords du canvas
  • Cliquer sur le canvas ajoutera une nouvelle balle à la position du clic
  • Les balles changeront de couleur lorsqu’elles se toucheront
  • De plus, on souhaite :
    • Utiliser de la programmation orientée objet
    • Utilser du Javascript “Vanilla” (c.à.d sans bibliothèque ou API externes que celles fournies par le navigateur)
    • Afficher le nombre de balles actives
    • Ajouter des boutons pour mettre en pause et reprendre l’animation, ainsi que pour effacer toutes les balles

Voici un aperçu du résultat final

Préparation du projet

  1. Créez un dossier global pour stocker le projet développé pendant ce cours :
  mkdir tutoriel-api
  cd tutoriel-api
  1. Créez un dossier client pour stocker les fichiers de la partie client de l’application
  mkdir client
  cd client

  1. Ouvrez le dossier client dans votre éditeur de code

  2. Le projet sera composée de 3 fichiers déstinés au navigateur et 2 classes d’objets pour gérer les balles :

  index.html
  styles.css
  main.mjs
  classes/Balle.mjs
  classes/Balles.mjs

Créez ces fichiers manuellement ou bien exécutez la commande suivante dans un terminal :

  New-Item index.html, main.mjs, styles.css
  New-Item classes -ItemType Directory
  New-Item classes/Balle.mjs, classes/Balles.mjs

Le HTML

Le fichier index.html sera notre page principale et va contenir :

  1. Un lien vers le fichier styles.css pour ajouter du style à la page.
  2. Un élément <canvas> qui servira de zone de dessin.
  3. Une div contenant des boutons de contrôle.
  4. Un lien vers le fichier main.mjs pour ajouter le code Javascript.
index.html
<!DOCTYPE html>
<html lang="fr-FR">


<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <title>API Canvas</title>


  <link rel="stylesheet" href="styles.css">


</head>


<body>


  <canvas></canvas>


  <div class="controls">
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <button id="clear">Clear</button>
    <p><span id="balls-count">0</span></p>
  </div>


  <script src="main.mjs" type="module"></script>


</body>


</html>

Le CSS

Le fichier styles.css contiendra le style de la page, qui sera assez simple pour ce tutoriel.

styles.css
html,
body {
  margin: 0;
  min-height: 500px;
}


html {
  height: 100%;
}


body {
  overflow: hidden;
  height: inherit;
}


canvas {
  cursor: pointer;
}


.controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  gap: 10px;
}


.controls button {
  background: #007bff;
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

Le Javascript et l’API Canvas

Commencer à utiliser une API, qu’elle soit client ou serveur, impliquera toujours une phase de recherche et d’apprentissage.

La documentation Mozilla est la ressource la plus complète et la plus fiable pour apprendre à utiliser les API Web.

L’API Canvas a bien sûr sa propre section sur le site de Mozilla.

Dans les grandes lignes, le Canvas est :

  • un élément HTML <canvas> qui permet de dessiner des graphiques
  • en 2D et en 3D selon le contexte
  • un contexte est un objet qui expose
    • des méthodes pour dessiner des formes
    • des propriétés pour définir des styles

Dessiner dans le canvas

Dessiner dans le canvas

Dessiner un cercle

Commençons par initialiser le canvas et dessiner un cercle pour tester que tout fonctionne correctement et découvrir la syntaxe de base de l’API Canvas.

Dans le fichier main.mjs, ajoutez le code suivant :

const canvas = document.querySelector("canvas"); // Récupère l'élément canvas du DOM
const ctx = canvas.getContext("2d"); // Définit et récupère le contexte du canvas, ici un contexte en 2 dimensions


canvas.width = window.innerWidth; // Définit la largeur du canvas aux dimensions de la fenêtre
canvas.height = window.innerHeight; // Définit la hauteur du canvas aux dimensions de la fenêtre


ctx.fillStyle = "black"; // Définit la couleur de fond du contexte
ctx.fillRect(0, 0, canvas.width, canvas.height); // Dessine un rectangle, du point (0, 0) à la taille du canvas, en utilisant la couleur de fond définie précédemment


ctx.beginPath(); // Démarre un nouveau chemin
ctx.arc(100, 100, 30, 0, Math.PI * 2); // Dessine un cercle de rayon 30px à la position (100px, 100px)
ctx.fillStyle = "red"; // Définit la couleur de remplissage
ctx.fill();

À ce stade, vous devriez voir un cercle rouge apparâitre sur le canvas :

Première conclusion

  • Nous avons vu comment initialiser un canvas, définir un contexte en 2D et dessiner un cercle.
  • Nous avons découvert la syntaxe de base de l’API Canvas.
  • Nous avons donc déjà commencé à utiliser une API client !

Dans la prochaine partie, nous allons continuer à explorer l’API Canvas pour créer une animation de balles rebondissantes.