Table des matières
L'élément Toile C'est l'une des nouveautés les plus attendues HTML5 Puisqu'il s'agit d'une alternative sérieuse au plug-in Flash d'Adobe, grâce à ses capacités natives et en ne dépendant pas d'une bibliothèque tierce, nous gagnons directement en stabilité et en support du navigateur, en cas de problème avec l'implémentation de la norme HTML5 .L'élément Toile nous permet de délimiter une zone dans nos documents HTML5 où nous pouvons dessiner et même ajouter des effets et des mouvements via Javascript.
L'élément Toile
Avant de pouvoir commencer à travailler avec l'élément Toile, nous allons définir ses caractéristiques de base, nous avons qu'il s'agit d'un élément de flux, il est totalement nouveau en HTML5, ses attributs sont hauteur pour sa hauteur et largeur pour sa largeur.
Voyons ci-dessous un petit exemple de la façon dont nous pouvons définir un Canvas dans notre document :
Exemple Votre navigateur ne supporte pas l'élément Toile Voyons rapidement ce qui se passe dans l'exemple; nous définissons d'abord un style où nous attribuons une bordure légèrement épaisse pour pouvoir distinguer nos Toile vide, puis nous commençons l'élément Canvas avec son étiquette d'ouverture et définissons ses attributs de hauteur et de largeur, à l'intérieur des étiquettes, nous plaçons un message au cas où le document est ouvert avec un navigateur qui ne prend pas en charge cette spécification de la norme.
Voyons maintenant à quoi ressemble ce code que nous venons d'expliquer dans notre navigateur :
Notre premier dessin
Comme nous l'avons mentionné au début du didacticiel, pour dessiner et effectuer des actions dans le canevas, nous devons utiliser Javascript, pour cela nous utiliserons une méthode appelée getContext () qui nous place dans le contexte de la Toile et avec elle nous pouvons lui dire quoi montrer.
On peut dessiner des figures aussi bien en 2D qu'en 3D, pour cela on passe dans le cas du premier, l'argument "2d".
Regardons l'exemple suivant pour mieux définir ce que nous expliquons :
Exemple Votre navigateur ne supporte pas l'élément Toile Ici, nous avons simplement défini une variable ctx auquel nous allons affecter l'objet document et ce dernier va appeler la méthode getContext et l'appliquer sur l'élément Canvas; alors nous avons que la variable ctx appelle une méthode appelée remplissageRect et à cela nous passons quelques coordonnées, si nous regardons de près nous passons 4 côtés, voyons qu'il a dessiné ceci dans le navigateur :
