Différences entre les versions de « Programmation objet et géométrie »

Aller à la navigation Aller à la recherche
m
<source> -> <syntaxhighlight> (phab:T237267)
m (<source> -> <syntaxhighlight> (phab:T237267))
 
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
 
<sourcesyntaxhighlight lang="html5">
<canvas id="cadre" width="320" height="240">
Si vous arrivez à lire ce texte, changez de navigateur!
</canvas>
</syntaxhighlight>
</source>
 
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'':
 
<sourcesyntaxhighlight lang="javascript">
var canvas = document.getElementById('cadre');
var pinceau = canvas.getContext('2d');
</syntaxhighlight>
</source>
 
À 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.
1 535

modifications

Menu de navigation