Tutoriel de canevas HTML

L'élément HTML <canvas> est utilisé pour dessiner des graphiques sur une page Web.

Le graphique ci-dessus est créé avec <canvas>.

Il affiche quatre éléments : un rectangle rouge, un rectangle dégradé, un rectangle multicolore et un texte multicolore.

Qu'est-ce qu'un canevas HTML ?

L'élément HTML <canvas> est utilisé pour dessiner des graphiques, à la volée, via des scripts (généralement JavaScript).

L'élément <canvas> n'est qu'un conteneur pour les graphiques. Vous devez utiliser un script pour dessiner réellement les graphiques.

Canvas propose plusieurs méthodes pour dessiner des chemins, des boîtes, des cercles, du texte et ajouter des images.

Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'élément <canvas>.

Element
<canvas>	4.0	9.0	2.0	3.1	9.0

Canvas peut dessiner du texte coloré, avec ou sans animation.

Canvas a d'excellentes fonctionnalités pour la présentation graphique des données avec une imagerie de graphiques et de tableaux.

Les objets Canvas peuvent bouger. Tout est possible : des simples balles rebondissantes aux animations complexes.

Canvas peut répondre aux événements JavaScript.

Canvas peut répondre à n'importe quelle action de l'utilisateur (clics de touche, clics de souris, clics de bouton, mouvement du doigt).

Les méthodes d'animation de Canvas offrent de nombreuses possibilités pour les applications de jeu HTML.

En HTML, un élément <canvas> ressemble à ceci :

L'élément <canvas> doit avoir un attribut id pour qu'il puisse être référencé par JavaScript.

L'attribut width et height est nécessaire pour définir la taille du canevas.

Conseil : Vous pouvez avoir plusieurs éléments <canvas> sur une même page HTML.

Par défaut, l'élément <canvas> n'a ni bordure ni contenu.

Pour ajouter une bordure, utilisez un attribut de style :

Les chapitres suivants montrent comment dessiner sur la toile.