Le code HTML <canvas> élément est utilisé pour dessiner des graphiques sur une page Web.
Le graphique à la gauche est créé avec <canvas> . Elle montre quatre éléments: un rectangle rouge, un rectangle de gradient, un rectangle multicolore, et un texte multicolore.
Qu'est-ce que HTML Canvas?
Le code HTML <canvas> élément est utilisé pour dessiner des graphiques, à la volée, via un script (usually JavaScript) .
Le <canvas> élément est seulement un conteneur pour les graphiques. Vous devez utiliser un script pour dessiner effectivement les graphiques.
Canvas dispose de plusieurs méthodes pour dessiner des chemins, des boîtes, des cercles, du texte, et en ajoutant des images.
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui supporte pleinement le <canvas> élément.
| Élément | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
HTML Canvas peut dessiner le texte
Toile peut dessiner le texte coloré, avec ou sans animation.
HTML Canvas peut dessiner des graphiques
Canvas a d'excellentes fonctionnalités pour la présentation de données graphiques avec une imagerie des graphiques et des tableaux.
HTML Canvas peut être animé
objets de toile peuvent se déplacer. Tout est possible: de boules simples rebondissants à des animations complexes.
HTML Canvas peut être interactif
Toile peut répondre à des événements JavaScript.
Toile peut répondre à toute action de l'utilisateur (clics clés, les clics de souris, clics de bouton, le mouvement du doigt).
HTML Canvas peut être utilisé dans Jeux
Les méthodes de toile pour les animations, offrent beaucoup de possibilités pour les applications de jeux HTML.
Toile Exemple
En HTML, un <canvas> élément ressemble à ceci:
<canvas id="myCanvas" width="200" height="100"></canvas>Le <canvas> élément doit avoir un attribut id de sorte qu'il peut être désigné par JavaScript.
L'attribut de largeur et la hauteur est nécessaire de définir la taille de la toile.
Tip: Vous pouvez avoir plusieurs <canvas> éléments sur une seule page HTML.
Par défaut, le <canvas> élément n'a pas de frontière et aucun contenu.
Pour ajouter une bordure, utilisez un attribut de style:
Exemple
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Essayez - le vous - même » Les chapitres suivants montrent comment dessiner sur la toile.