Dessin (HTML5 CANVAS)

Présentation de l’API HTML5 CANVAS

HTML5 CANVAS (cf. balise <canvas>) est une API de dessin qui permet de manipuler dynamiquement des images bitmap via des scripts rédigés en JavaScript. Cette API est prise en compte dans la majorité des versions récentes des principaux navigateurs.

<canvas>, nouvel élément sous HTML5, est utilisable pour réaliser des graphiques simples voire même des animations (sans atteindre le degré de sophistication d’Adobe Flash).

<canvas> a d’abord été implémenté sous Apple Mac OS X (Dashboard) puis a été pris en compte dans le navigateur Safari et enfin sous Mozilla Firefox (Gecko 1.8).

Dans les exemples de ce chapitre, l’élément <canvas> va être utilisé dans la conception d’un jeu de type TicTacToe (encore appelé Morpion).

La série d’exemples (tous basés sur le TicTacToe) vous donnera un petit aperçu de ce qu’il est possible de faire avec <canvas>.

Vous pourrez trouver sur le Net de nombreux tutoriels plus complets sur <canvas>, comme celui de la fondation Mozilla (https://developer.mozilla.org/fr/docs/Web/HTML/Canvas).

Exemples d’applications de l’élément <canvas>

1. Exemple 1 : Tracé d’un simple carré

Dans ce premier exemple nous allons nous contenter d’un tracé basique d’un carré. Ce sera la base future de la création d’une grille de TicTacToe.

Section HTML <head>

Cette section ne présente pas de vraies spécificités. Vous y trouverez une simple balise meta et le titre du script.

<!-- Début en-tête script HTML --> 
<head> 
 
    <!-- Balise meta --> 
    <meta HTTP-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <!-- Titre du script HTML --> 
    <title>MORPION_01/title> 
 
</head>

Section HTML <body>

Le code de la section <body> est intégralement reproduit ci-après :

<!-- Mise en place de l'élément HTML canvas --> 
<!-- NB : - Largeur du canvas : 1000 --> 
<!--      - Hauteur du canvas : 800 --> 
<canvas id="grilleMorpion" width="1000" height="800">  
    Attention votre navigateur ne supporte pas l'élément Canvas 
</canvas> 
 
<!-- Code JavaScript associé au canvas --> 
<script type="text/javascript"> 
 
    /* Définition de l'emplacement du canvas */ 
    var emplacementCanvas = document.getElementById("grilleMorpion"); 
 
    /* Définition du contexte du canvas (2D) */ 
    var contexteCanvas = emplacementCanvas.getContext("2d"); 
 
    /* 
    Tracé dans le canvas 
    */ 
 
    /* Définition des propriétés des traits */ 
    contexteCanvas.strokeStyle = "black"; 
    contexteCanvas.lineWidth = 1; 
 
    /* Début du parcours en ligne brisée */ 
    contexteCanvas.beginPath(); 
 
    /* Point de départ du tracé (x, y) */ 
    contexteCanvas.moveTo(10, 10); 
 
    /* Tracé du trait...