Sommaire

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 ...