Différences entre les versions de « Programmation objet et géométrie/Les lignes droites de canvas »

aucun résumé de modification
(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... »)
 
 
==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==
 
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==
 
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=
1 277

modifications