« Programmation objet et géométrie/Les lignes droites de canvas » : différence entre les versions

Un livre de Wikilivres.
Contenu supprimé Contenu ajouté
Page créée avec « Pour tracer un segment, il suffit de fournir les coordonnées de son extrémité (donc 2 nombres), du moment que c'est après ''beginPath()'' et avant ''stroke()''. Les se... »
 
Aucun résumé des modifications
Ligne 4 : Ligne 4 :


==Segment==
==Segment==

L'algorithme est le suivant:

#déclarer le début d'un trait de pinceau (tremper le pinceau dans la peinture), avec ''beginPath()'';
#poser le pinceau au début du trait, avec ''moveTo()'';
#tirer le trait jusqu'au point d'arrivée, avec ''lineTo()'';
#lever le pinceau, avec ''stroke()''.

Voici un exemple:

<source lang="html5">
<html>
<style type="text/css">
canvas { border: 4px solid brown; background: #FFFFFF }
</style>
<body>
<canvas id="cadre" width="400" height="200">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
pinceau.beginPath();
pinceau.moveTo(50,100);
pinceau.lineTo(350,100);
pinceau.stroke();
</script>
</canvas>
<br/>
</body>
</html>
</source>


==Triangle==
==Triangle==

Pour tracer un polygone, il faut faire un ''lineTo()'' pour chaque côté (en n'oubliant pas de revenir au point de départ):

<source lang="html5">
<html>
<style type="text/css">
canvas { border: 4px solid brown; background: #FFFFFF }
</style>
<body>
<canvas id="cadre" width="400" height="200">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
pinceau.beginPath();
pinceau.moveTo(50,150);
pinceau.lineTo(350,150);
pinceau.lineTo(200,50);
pinceau.lineTo(50,150);//pour refermer le triangle
pinceau.stroke();
</script>
</canvas>
<br/>
</body>
</html>
</source>

Une variante consiste à remplir le triangle au lieu de seulement dessiner ses côté, et dans ce cas le dernier côté n'est pas nécessaire:

<source lang="html">
<html>
<style type="text/css">
canvas { border: 4px solid brown; background: #FFFFFF }
</style>
<body>
<canvas id="cadre" width="400" height="200">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
pinceau.moveTo(50,150);
pinceau.lineTo(350,150);
pinceau.lineTo(200,50);
pinceau.fill();
</script>
</canvas>
<br/>
</body>
</html>
</source>


==Fonction==
==Fonction==

Pour représenter graphiquement une fonction, il suffit de dessiner un polygone ayant beaucoup de côtés assez petits pour donner l'illusion d'une courbe.


=Arbre de Stern-Brocot=
=Arbre de Stern-Brocot=

Version du 11 janvier 2012 à 18:01

Pour tracer un segment, il suffit de fournir les coordonnées de son extrémité (donc 2 nombres), du moment que c'est après beginPath() et avant stroke(). Les segments sont donc plus faciles à tracer que les courbes de Bézier, et plus rapides à tracer aussi. En plus, en utilisant moveTo() on peut tracer des segments discontinus (ou des graduations). La principale question est où est l'origine du segment?. En fait elle est mémorisée comme la position actuelle du pinceau, définie par le dernier moveTo() ou le dernier lineTo() appliqué. Ceci permet de tracer des polygones ou de représenter graphiquement des fonctions.

Exemples de base

Segment

L'algorithme est le suivant:

  1. déclarer le début d'un trait de pinceau (tremper le pinceau dans la peinture), avec beginPath();
  2. poser le pinceau au début du trait, avec moveTo();
  3. tirer le trait jusqu'au point d'arrivée, avec lineTo();
  4. lever le pinceau, avec stroke().

Voici un exemple:

<html>
<style type="text/css">
      canvas { border: 4px solid brown; background: #FFFFFF }
</style>
<body>
<canvas id="cadre" width="400" height="200">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
pinceau.beginPath();
pinceau.moveTo(50,100);
pinceau.lineTo(350,100);
pinceau.stroke();
</script>
</canvas>
<br/>
</body>
</html>

Triangle

Pour tracer un polygone, il faut faire un lineTo() pour chaque côté (en n'oubliant pas de revenir au point de départ):

<html>
<style type="text/css">
      canvas { border: 4px solid brown; background: #FFFFFF }
</style>
<body>
<canvas id="cadre" width="400" height="200">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
pinceau.beginPath();
pinceau.moveTo(50,150);
pinceau.lineTo(350,150);
pinceau.lineTo(200,50);
pinceau.lineTo(50,150);//pour refermer le triangle
pinceau.stroke();
</script>
</canvas>
<br/>
</body>
</html>

Une variante consiste à remplir le triangle au lieu de seulement dessiner ses côté, et dans ce cas le dernier côté n'est pas nécessaire:

<html>
<style type="text/css">
      canvas { border: 4px solid brown; background: #FFFFFF }
</style>
<body>
<canvas id="cadre" width="400" height="200">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
pinceau.moveTo(50,150);
pinceau.lineTo(350,150);
pinceau.lineTo(200,50);
pinceau.fill();
</script>
</canvas>
<br/>
</body>
</html>

Fonction

Pour représenter graphiquement une fonction, il suffit de dessiner un polygone ayant beaucoup de côtés assez petits pour donner l'illusion d'une courbe.

Arbre de Stern-Brocot