On se retrouve aujourd’hui pour la grande première de Barista, le tout premier cycle du grand programme de formation. Cette série de tutoriels ne nécessite pas forcément de gros prérequis, elle demande cependant une certaine ténacité, car la difficulté peut augmenter très vite. C’est d’ailleurs pour cela que je lui donne la note de 3 cafés! Pour celles et ceux qui dormaient au fond de la classe, voici un bref récapitulatif des faits:

On se retrouve aujourd’hui pour la grande première de Barista, le tout premier cycle du grand programme de formation. Cette série de tutoriels ne nécessite pas forcément de gros prérequis, elle demande cependant une certaine ténacité, car la difficulté peut augmenter très vite. C’est d’ailleurs pour cela que je lui donne la note de 3 cafés! Pour celles et ceux qui dormaient au fond de la classe, voici un bref récapitulatif des faits:

 

Dessiner avec la balise canvas

La balise canvas est, comme son nom l’indique, une surface sur laquelle on peut dessiner, il s’agit d’un nouvel élément du DOM qui fait partie des nouveautés apportées par HTML5. Nous allons commencer par créer un fichier de base pour notre application sur la base du modèle suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Barista</title>
    <script src="./dist/main.js"></script>
</head>
<body>
    <canvas id="barista"></canvas>
</body>
</html>
/* Point d'entrée de l'application */
function init(){
    //code de notre Application
}
/* 
* Quand toutes les données sont chargées (DOM, images, sons, etc.)
* On démarre l'application par la fonction init
*/
window.addEventListener("load", init);

Le fichier index.html est un fichier HTML5 simple, les seuls éléments notables sont :

  • l’inclusion d’un fichier Javascript ./dist.main.js.
  • la présence d’une balise <canvas> dont l’id est « barista ».

Nous allons pouvoir passer à la suite, çàd créer un canvas et l’utiliser.

Créer un canvas

Créer un canvas peut se faire de deux façons :

  • soit de la manière la plus simple qui soit, c’est-à-dire, en ajoutant une balise <canvas> au sein du DOM (dans le code HTML) ;
  • soit en la créant par programmation et en l’ajoutant manuellement au DOM de la façon suivante :
const canvas = document.createElement("canvas");
document.querySelector("body").appendChild(canvas);

Dans notre exemple, nous choisirons la première méthode, c’est-à-dire ajouter une balise <canvas> au code HTML. Notre fichier index.html en contient déjà une, nous allons donc créer une fonction pour la retrouver.

/*
* Retourne une référence à l'objet canvas créé à l'aide de la balise 
* placée dans le code html
*/
function getCanvas(){
    return document.querySelector("canvas"); 
}

À l’aide de cette méthode, nous avons accès à l’objet canvas, maintenant il nous faut pouvoir dessiner à l’intérieur. Pour ce faire nous allons d’abord devoir récupérer le contexte de l’objet canvas.

Le contexte de rendu

L’élément canvas crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs contextes de rendu, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D’autres contextes permettent d’autres types de rendu, tel que le contexte WebGL, qui utilise un contexte 3D (« experimental-webgl ») inspiré de OpenGL ES.

Initialement, le canvas est vide. Pour afficher quelque chose, un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. Pour de plus amples informations sur ce qu’est un contexte je vous invite à vous rendre sur le site du W3C. Le contexte de l’objet canvas se récupère à l’aide de la méthode getContext() de la façon suivante:

/*
* Retourne le contexte d'exécution 2d du canvas
*/
function getContext(){
    return getCanvas().getContext("2d");
}
/*
* Retourne une référence à l'objet canvas créé à l'aide de la balise 
* placée dans le code html
*/
function getCanvas(){
    return document.querySelector("canvas"); 
}

Dessiner des primitives

L’objet canvas embarque toute une APIdédiée au dessin, ce qui permet aux développeurs de créer du contenu 2d sans avoir systématiquement recours à des images. À l’aide de cette API, on peut dessiner n’importe quelle forme géométrique, voire des dessins plus complexes, la seule vraie limite est votre imagination.

/*
* Retourne le contexte d'exécution 2d du canvas
*/
function getContext(){
    return getCanvas().getContext("2d");
}
/*
* Retourne une référence à l'objet canvas créé à l'aide de la balise 
* placée dans le code html
*/
function getCanvas(){
    return document.querySelector("canvas"); 
}

/* Point d'entrée de l'application */
function init(){
    const canvas = getCanvas();
    const context  = getContext(); 

    // on détermine les dimensions du canvas
    canvas.width = 640;
    canvas.height = 480;

    // crée un nouveau path 
    context.beginPath(); 

    // on définit l'épaisseur de la ligne (unité en px)
    context.lineWidth = 5; 

    // on bouge vers les coordonnées x = 10 et y = 10 (sans rien dessiner)
    context.moveTo(10,10); 

    // on dessine une ligne depuis notre point de départ vers le point d'arrivée (x=10,y100)
    context.lineTo(10,100); 

    // on définit la couleur de la ligne, ici c'est du vert.
    context.strokeStyle = "#00ff00"

    // et enfin on appelle la méthode stroke, qui va se charger d'exécuter l'ensemble 
    // des commandes que nous avons utilisées depuis que l'on a invoqué beinPath()
    // si l'on commente l'appel à cette méthode, rien ne se produit. 
    // L'appel à stroke permet de fermer le chemin créé par beginPath().
    context.stroke();
}
/* 
* Quand toutes les données sont chargées (DOM, images, sons, etc.)
* On démarre l'application par la fonction init
*/
window.addEventListener("load", init);

Dessiner une ligne

Avant toute opération de dessin en HTML5, il nous faudra commencer par un beginPath() qui permet, comme son nom l’indique, de commencer un « chemin », comprendre par là que l’on initialise un nouveau cycle de dessin, un peu comme si l’on prenait une nouvelle feuille vierge pour dessiner. Faisons le point de ce que nous avons actuellement sur notre canvas, une ligne dont les propriétés sont :

  • Une épaisseur de 5px définie par la propriété lineWidth = 5 ;
  • Une couleur définie par la propriété strokeStyle = ‘#003300’ ;
  • Un point de départ situé à x = 10px et y = 10px que nous avons défini avec l’appel à la fonction moveTo;
  • Un point d’arrivée situé à x = 10px et y = 100px que nous avons relié au point de départ en faisant appel à la fonction lineTo, qui relie le dernier point dessiné au point dont les coordonnées sont passées en paramètres.

Vous pouvez remarquer que la dernière ligne de notre code se termine par context.stroke(), cette méthode permet de dessinerl’ensemble du jeu d’instructions définis entre l’appel à context,beginPath() et context.stroke(), si vous commentez l’appel à cette méthode, rien ne sera dessiné.

Notez également que context.stroke() n’exécute que les jeux d’instructions relatifs aux lignes et pas aux formes pleines, ces dernières sont gérées de manière différente, ce qui nous amène à la suite, dessiner des primitives « pleines », en commençant par le cercle.

Dessiner un cercle

Si je souhaite dessiner un cercle, je peux utiliser la méthode suivante :

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

Où x et y représentent les coordonnées du centre de mon arc, radius le rayon ( en pixels ) de mon arc, startAngle et endAngle les angles de départ et d’arrivée (en radians) et counterClockwise un booléen qui sert à définir si l’arc est défini dans le sens antihoraire ou non. Étudions à présent le code suivant :

/*
* Retourne le contexte d'exécution 2d du canvas
*/
function getContext() {
    return getCanvas().getContext("2d");
}
/*
* Retourne une référence à l'objet canvas créé à l'aide de la balise 
* placée dans le code html
*/
function getCanvas() {
    return document.querySelector("canvas");
}

function init() {
    const canvas = getCanvas();
    const context = getContext();

    // on détermine les dimensions du canvas
    canvas.width = 640;
    canvas.height = 480;

    // crée un nouveau path 
    context.beginPath();
    // on va donc définir un style de remplissage
    context.fillStyle = "#f00f00";
    // on bouge notre premier point de chemin vers le centre du cercle
    context.moveTo(320, 240);
    // on dessine le cercle
    context.arc(320, 240, 50, 0, 360 * Math.PI / 180, false);
    //remplir le cercle
    context.fill();
}


window.addEventListener("load", init);

Comme pour la ligne, faisons le point de ce que nous avons actuellement sur notre canvas.Un cercle dont les propriétés sont :

  • Une couleur de remplissage définie par la propriété fillStyle ;
  • Le centre de départ situé à x = 320px et y = 240px.
  • Un rayon de 50px.
  • Un angle de départ situé à 0 degrés et converti en radians.
  • Un angle d’arrivée situé à 360 degrés et converti en radians.
  • Une direction dans le sens horaire.

Comme vous pouvez le constater, nous utilisons toujours la méthode context.beginPath() pour créer un nouveau dessin. Afin de pouvoir exécuter le nouveau jeu d’instructions, relatif cette fois-ci à des formes pleines, nous utilisons la méthode context.fill() qui agit de la même façon que la méthode context.stroke().

En regardant un peu plus en avant l’API de dessin, on peut s’apercevoir qu’il existe pas mal de méthodes pour dessiner d’autres primitives, ou d’autres types de lignes, qu’elles soient droites ou dessinées à l’aide de courbes de Bézier etc… On va maintenant apprendre à dessiner un rectangle.

Dessiner un rectangle

Si je souhaite dessiner un rectangle, je peux utiliser la méthode suivante :

context.fillRect(x, y, width, height);

Où x et y représentent les coordonnées du coin en haut à gauche de mon rectangle et width et height représentent la largeur et la hauteur du rectangle que je souhaite dessiner.

/*
* Retourne le contexte d'exécution 2d du canvas
*/
function getContext() {
    return getCanvas().getContext("2d");
}
/*
* Retourne une référence à l'objet canvas créé à l'aide de la balise 
* placée dans le code html
*/
function getCanvas() {
    return document.querySelector("canvas");
}

function init() {
    const canvas = getCanvas();
    const context = getContext();

    // on détermine les dimensions du canvas
    canvas.width = 640;
    canvas.height = 480;

    // crée un nouveau path 
    context.beginPath();
    // on va donc définir un style de remplissage
    context.fillStyle = "#ff0000";
    //dessiner un rectangle
    context.fillRect(320,240,100,30);
    //remplir le rectangle
    context.fill();
}


window.addEventListener("load", init);

Maintenant que nous savons comment dessiner des primitives, nous allons apprendre à les transformer, comprendre par là que nous allons leur appliquer un changement d’échelle, de rotation, d’alpha ou de translation.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *