Le HTML5 <canvas> tag

La nouvelle étiquette est une HTML5 <canvas> balise n'est pas présente dans les versions précédentes, ce qui peut être utilisé pour dessiner et travailler avec des graphiques.

Le <canvas> tag a besoin d'un soutien langage de script comme JavaScript pour fonctionner correctement et exécuter pleinement son potentiel.

Le but de cet article est d'illustrer l'utilisation de base des nouvelles étiquettes, mais certains points avancés par l'utilisation constante d'exemples pratiques, je l'espère, de faciliter l'apprentissage.

Prémisse

Comme une nouveauté absolue dans le meilleur toile n'est pas soutenue par tous les navigateurs, il est donc possible que les exemples de démonstration dans cet article ne sont pas affichés correctement.
Le test a été réalisé avec Google Chrome, sur lequel vous n'avez pas connu de problèmes.

Utilisez le tag <canvas>

L'utilisation commune de la balise Canvas est assez simple et pas différent des autres balises HTML.
Formellement Canvas est un simple conteneur et, comme telle, a une balise d'ouverture (<canvas>) et de fermeture (</ Canvas>):

 <canvas id="esempio" width="196" height="96">

 





 Elément non pris en charge







 </ Canvas>

Si les dimensions ne sont pas indiqués explicitement (en utilisant les attributs width et hauteur) de la taille du conteneur, attribué par défaut, un rectangle de base à hauteur de 300 et 150.
L'attribut id, bien sûr, n'est pas indispensable mais, à mon avis, c'est toujours une bonne idée d'appeler pour avoir une référence unique pour chaque objet qui est utilisé sur la page.

La portion de texte délimité par des <canvas> et </ canvas> pour représenter la note indique quand le graphique n'est pas supporté par votre navigateur.

Avant de commencer avec les détails de mise en œuvre de tester le potentiel de la toile avec un simple code à tester en direct:

 <canvas id="bandierina" width="180" height = "100"> Non géré </ Canvas>







 <script type="text/javascript">







 var canvas = document.getElementById ('flag');







 var c = canvas.getContext ('2 D ');







 c.fillStyle = '# FF0000 ";







 c.fillRect (0,0,180,100);







 c.fillStyle = '# FFFFFF';







 c.fillRect (0,0,120,100);







 c.fillStyle = '# 00FF00';







 c.fillRect (0,0,60,100);







 </ Script>

Sur cette page vous pouvez voir le résultat de ce code (voir la sortie correctement, vous devez avoir, une fois de plus, un navigateur qui prend en charge HTML 5).

Comme déjà annoncé au début de l'article dans cette section de code est explicite sur le fait que le travail toile en utilisant un script. De cet exemple, nous pouvons immédiatement constater la technique standard pour extraire les variables objet toile de fond:

 / / Créer l'élément canvas par ID







 var canvas = document.getElementById ('flag');









 / / Création d'un nouveau objet bidimensionnel sur la toile







 var c = canvas.getContext ('2 D ');

La méthode getElementById Javascript stocke l'objet dans une toile variable, grâce à la valeur de son champ id; getContext ('2 D ') prend le contexte, ou un objet qui offre au programmeur un certain nombre de méthodes pour travailler avec la toile comme désiré (dans notre cas, vous souhaitez travailler avec les fonctions graphiques en deux dimensions, c'est-à-2D).

Dans les pages suivantes, nous allons énumérer quelques opérations de base utiles pour le programmeur a l'intention de faire usage de la toile.

• <<
• 1
• 2
• 3
• 4
• 5
• >>