Tutoriels HTML Canvas

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

Les graphiques ci-dessus ont été créés avec <canvas>.

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

Qu'est-ce que l'HTML Canvas ?

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

L'élément <canvas> est simplement un conteneur pour des graphiques. Vous devez utiliser des scripts pour dessiner des graphiques réels.

Le Canvas dispose de multiples méthodes pour dessiner des chemins, des boîtes, des cercles, du texte et ajouter des images.

L'HTML Canvas peut dessiner du texte

Le Canvas peut dessiner du texte en couleur et peut inclure des effets d'animation.

L'HTML Canvas peut dessiner des graphiques

Le Canvas possède une grande capacité à présenter des données graphiques et des graphiques avec des graphiques et des graphiques.

L'HTML Canvas peut être animé

Les objets Canvas peuvent se déplacer. Tout est possible : des ballons de bounce simples aux animations complexes.

L'HTML Canvas est interactif

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

Le Canvas peut répondre à toute action de l'utilisateur (clic de touche, clic de souris, clic de bouton, déplacement du doigt).

L'HTML Canvas peut être utilisé pour les jeux

Les méthodes d'animation du Canvas offrent de nombreuses possibilités aux applications de jeux HTML.

Exemple de Canvas

Dans HTML, l'élément <canvas> a cette apparence :

<canvas id="myCanvas" width="200" height="100"></canvas>

L'élément <canvas> doit avoir une propriété id pour que JavaScript puisse s'y référer.

Les attributs width et height sont nécessaires pour définir la taille du canevas.

Astuce : une page HTML peut contenir plusieurs éléments <canvas>.

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

Pour ajouter un cadre, utilisez l'attribut style :

Exemple

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Essayez-le vous-même

Les chapitres suivants expliqueront comment dessiner sur le canevas.

Veuillez également consulter :

Manuel complet de Canvas sur CodeW3C.com

Support des navigateurs

<canvas> est un élément de la norme HTML5 (2014).

Tous les navigateurs modernes supportent <canvas> :