Easy-Micro


LANGAGE HTML5 CANVAS
Présentation

La balise CANVAS

La balise HTML5 <canvas> est utilisé pour dessiner des graphiques (essentiellement en Javascript). Canvas permet de définir un cadre dans lequel des formes seront définies.

Exemple de canvas :
<canvas id="monCanvas" width="150" height="100" style="border:1px dotted #0000ff;">
Texte alternatif pour les navigateurs ne supportant pas Canvas
</canvas>


Canvas avec javascript

Le langage javascript permet de dessiner des tracé ou des formes, des boites, cercles, images ou texte avec la methode HTML5 getContext('2D')

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

<script type="text/javascript">
var c = document.getElementById(" monCanvas "); // trouve l'élément
var ctx=c.getContext('2d'); // application de la methode HTML5 getContext
ici les instructions javascript...
</script>

Pour exploiter un canvas en javascript, deux fonctions sont appelées :
  • getElementById() qui va permettre d'aller chercher et cibler l'élément <canvas> identifié par son attribut id unique (ici mon_canvas),
  • puis la méthode getContext() de l'élément ainsi récupéré pour savoir dans quel contexte de dessin (2D ou 3D) le script va pouvoir agir, et de quelles fonctions il pourra disposer. Le contexte sera l'élément central de gestion de Canvas.



Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mercredi 20 mars 2019 - Semaine 12 - Saint Herbert (Demain: Sainte Clémence)
Aujourd'hui, c'est l'anniversaire de Danièle Gilbert (1943-76 ans), animatrice de télévision française et de Marthe Villalonga (1932), actrice française. Autre 20 mars: 1815 : de retour de l'île d'Elbe et après une marche triomphale sur Paris, Napoléon entre dans la capitale. 1965 : France Gall gagne l'Eurovision pour le Luxembourg avec Poupée de cire poupée de son.
Haut de page Easy-Micro