Comment dessiner des graphiques avec des Canvas en HTML5 - Letecode
Suivez nous
Table de matière
  1. Tutoriels
  2. Tutoriel HTML5
  3. Canvas HTML5
Chapitres

Canvas HTML5

Dernière mise à jour : 16/08/2022

Dans ce chapitre, vous apprendrez à dessiner des graphiques sur une page Web à l'aide de l'élément canvas en HTML5.

Qu'est-ce que Canvas ?

L'élément canvas en HTML5 peut être utilisé pour dessiner des graphiques sur la page Web via JavaScript. Le canvas a été introduit à l'origine par Apple pour les widgets du tableau de bord Mac OS et pour alimenter les graphiques du navigateur Web Safari. Plus tard, il a été adopté par Firefox, Google Chrome et Opera. Désormais, le canvas fait partie de la nouvelle spécification HTML5 pour les technologies Web de nouvelle génération.

Par défaut, l'élément <canvas> a 300 pixels de largeur et 150 pixels de hauteur sans bordure ni contenu. Cependant, la largeur et la hauteur personnalisées peuvent être définies à l'aide de la propriété CSS height et width tandis que la bordure peut être appliquée à l'aide de la propriété CSS border.

Comprendre les coordonnées du canvas

Le canvas est une zone rectangulaire à deux dimensions. Les coordonnées du coin supérieur gauche du canvas sont (0, 0) qui est appelé origine, et les coordonnées du coin inférieur droit sont ( largeur du canvas , hauteur du canevas ).

Conseil : L'élément <canvas> est pris en charge dans tous les principaux navigateurs Web tels que Chrome, Firefox, Safari, Opera et supérieur.

 

Tracé de dessin et formes sur un canvas

Dans cette section, nous allons examiner de plus près comment dessiner des chemins et des formes de base à l'aide du nouvel élément canvas HTML5 et de JavaScript.

Voici le modèle de base pour dessiner des chemins et des formes sur le canvas 2D HTML5.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Dessiner sur un Canvas</title>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        // effectuter les dessins
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

Toutes les lignes sauf celles de 7 à 11 sont assez simples. La fonction anonyme attachée à l'événement window.onload s'exécutera lors du chargement de la page. Une fois la page chargée, nous pouvons accéder à l'élément canvas avec method document.getElementById(). Plus tard, nous avons défini un contexte de canevas 2D en passant 2d dans la méthode getContext() de l'objet canevas.

Tracer une ligne

Le moyen le plus simple que vous pouvez dessiner sur un canvas est une ligne droite. Les méthodes les plus essentielles utilisées à cette fin sont moveTo(), lineTo() et le stroke().

La méthode moveTo() définit la position du curseur de dessin sur le canvas, tandis que la méthode lineTo() est utilisée pour définir les coordonnées du point final de la ligne, et enfin la méthode stroke() est utilisée pour rendre la ligne visible. Essayons un exemple :

<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.moveTo(50, 150);
        context.lineTo(250, 50);
        context.stroke();
    };
</script>

Dessiner un arc

Vous pouvez créer des arcs en utilisant la méthode arc(). La syntaxe de cette méthode est la suivante :

context.arc(centerX, centerY, radius, startingAngle, endingAngle, antihoraire);

Le code JavaScript dans l'exemple suivant dessinera un arc sur le canevas.

<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
        context.stroke();
    };
</script>

Dessiner un rectangle

Vous pouvez créer des formes rectangulaires et carrées en utilisant la méthode rect(). Cette méthode nécessite quatre paramètres x, y la position du rectangle ainsi que sa largeur et sa hauteur.

La syntaxe de base de la méthode rect() peut être donnée par :

context.rect (x, y, largeur, hauteur);

Le code JavaScript suivant dessinera une forme rectangulaire centrée sur le canevas.

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        context.stroke();
    };
</script>

Dessiner un cercle

Il n'y a pas de méthode spécifique pour créer un cercle comme la méthode rect() du rectangle. Cependant, vous pouvez créer un arc entièrement fermé tel qu'un cercle à l'aide de la méthode arc().

La syntaxe pour dessiner un cercle complet à l'aide de la méthode arc() peut être donnée par :

context.arc (centerX, centerY, radius, 0, 2 * Math.PI, false);

L'exemple suivant dessinera un cercle complet centré sur la toile.

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        context.stroke();
    };
</script>

Application de styles et de couleurs sur le trait

La couleur par défaut du trait est le noir et son épaisseur est d'un pixel. Mais, vous pouvez définir la couleur et la largeur du trait en utilisant respectivement les propriétés strokeStyleet lineWidth.

L'exemple suivant tracera une ligne de couleur orange d'une largeur de 5 pixels.

<script>

window.onload = function() {

        var canvas = document.getElementById("myCanvas");

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

        context.lineWidth = 5;

        context.strokeStyle = "orange";

        context.moveTo(50, 150);

        context.lineTo(250, 50);

        context.stroke();

    };

</script>

Vous pouvez également définir le style de capuchon pour les lignes à l'aide de la propriété  lineCap. Il existe trois styles disponibles pour les capuchons de ligne - bout à bout, rond et carré. Voici un exemple :

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.strokeStyle = "orange";
        context.lineCap = "round";
        context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
        context.stroke();
    };
</script>

Couleurs de remplissage à l'intérieur des formes de canvas

Vous pouvez également remplir la couleur à l'intérieur des formes de canevas en utilisant la méthode fillStyle().

L'exemple suivant vous montrera comment remplir une couleur unie à l'intérieur d'une forme rectangulaire.

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        context.fillStyle = "#FB8B89";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    };
</script>

Astuce : Lors du style des formes sur le canevas, il est recommandé d'utiliser la méthode fill() avant la méthode stroke() afin de rendre le trait correctement.

De même, vous pouvez également utiliser la méthode fillStyle() pour remplir une couleur unie à l'intérieur d'un cercle.

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        context.fillStyle = "#FB8B89";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    };
</script>

Remplissage des dégradés de couleurs à l'intérieur des formes de canvas

Vous pouvez également remplir la couleur du dégradé à l'intérieur des formes de canvas. Un dégradé est juste une transition visuelle en douceur d'une couleur à une autre. Deux types de dégradé sont disponibles : linéaire et radial .

La syntaxe de base pour créer un dégradé linéaire peut être donnée avec :

var grd = context.createLinearGradient ( startX , startY, endX, endY);

L'exemple suivant utilise la méthode createLinearGradient() pour remplir une couleur de dégradé linéaire à l'intérieur d'un rectangle. Essayons-le pour comprendre comment cela fonctionne fondamentalement:

<script>

	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
        grd.addColorStop(0, '#8ED6FF');   
        grd.addColorStop(1, '#004CB3');
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    };

</script>

De même, vous pouvez remplir des formes de canevas avec un dégradé radial à l'aide de la méthode createRadialGradient(). La syntaxe de base pour créer un dégradé radial peut être donnée avec :

var grd = context.createRadialGradient ( startX , startY, startRadius, endX, endY, endRadius);

L'exemple suivant utilise la méthode createRadialGradient() pour remplir une couleur de dégradé radial à l'intérieur d'un cercle. Essayons-le pour comprendre comment cela fonctionne réellement :

<script>
window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100);
        grd.addColorStop(0, '#8ED6FF');   
        grd.addColorStop(1, '#004CB3');
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    };
</script>

Dessiner du texte sur un canvas

Vous pouvez également dessiner du texte sur la toile. Ces textes peuvent contenir n'importe quel caractère Unicode. L'exemple suivant dessinera un simple message d'accueil "Hello World!" sur un canvas.

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.fillText("Hello World!", 50, 100);
    };
</script>

Vous pouvez également définir la couleur et l'alignement du texte sur le canevas, comme ceci :

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillStyle = "orange";
        context.fillText("Hello World!", 150, 100);
    };
</script>

Vous pouvez également appliquer un trait sur du texte à l'aide de la méthode strokeText(). Cette méthode colorera le périmètre du texte au lieu de le remplir. Cependant, si vous souhaitez définir à la fois le remplissage et le trait sur le texte du canevas, vous pouvez utiliser les méthodes  strokeText() et fillText() ensemble.

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.strokeStyle = "orange";
        context.strokeText("Hello World!", 150, 100);
    };
</script>

Astuce : Lors du style du texte sur le canevas, il est recommandé d'utiliser la méthode fillText() avant la méthode strokeText() afin de rendre le trait correctement.

 

Nouveaux types des champs de saisie (inputs) en HTML5