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

Découvrez 

le livre :

Aussi inclus dans nos :

Précédent
Présentation de l'API HTML5 CANVAS
Suivant
Différentes solutions de conception de graphiques de gestion