« Programmation objet et géométrie » : différence entre les versions

La balise [[w:canvas (balise html)|canvas]] de [[w:html|html]]5 permet de faire du [[w:Graphisme vectoriel|dessin vectoriel]], donc de la géométrie. Comme avec les ''CaRScripts'' (ci-dessus), la fabrication des figures se fait par [[w:JavaScript|JavaScript]]. Et la programmation objet apparaît d'emblée, avec le [[w:Document Object Model|DOM]]. L'objet de référence s'appelle ''document'' et c'est ... le document lui-même, c'est-à-dire la page html. Ainsi, on crée dans le corps du fichier ''html'' une zone de dessin avec

 

<canvas id="cadre" width="320" height="240">

Si vous arrivez à lire ce texte, changez de navigateur!

</canvas>

 

Alors le ''canevas'' porte un identifiant (ci-dessus, ''cadre'') ce qui permet à JavaScript de le retrouver, en demandant au ''document'' de lui donner un objet ayant comme identifiant ''cadre'':

 

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

var pinceau = canvas.getContext('2d');

 

À partir de là, l'objet ''pinceau'' possède les méthodes graphiques de tracé de lignes droites, arcs de cercles, [[w:courbe de Bézier|courbes de Bézier]] et rectangles qui lui permettent de faire du graphisme vectoriel dans le document html.