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

aucun résumé de modification
 
==Segment==
 
===Segment en traits pleins===
 
L'algorithme est le suivant:
</html>
</source>
 
===Segment en pointillés===
 
 
 
==Triangle==
</source>
 
Une variante consiste à remplir le triangle au lieu de seulement dessiner ses côtécôtés, et dans ce cas le dernier côté n'est pas nécessaire:
 
<source lang="htmlhtml5">
<html>
<style type="text/css">
==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. Par exemple, pour dessiner une parabole on peut faire comme ceci:
 
<source lang="html5">
<html>
<style type="text/css">
canvas { border: 4px solid brown; background: #FFFFFF }
</style>
<body>
<canvas id="cadre" width="400" height="400">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
pinceau.strokeStyle="Red";
pinceau.beginPath();
pinceau.moveTo(0,0);
for(x=0;x<=400;x++){
pinceau.lineTo(x,400-Math.pow(x-200,2)/100);
}
pinceau.stroke();
</script>
</canvas>
<br/>
</body>
</html>
</source>
 
On peut ajouter des axes gradués avec d'autres boucles:
 
<source lang="javascript">
pinceau.strokeStyle="Blue";
pinceau.beginPath();
pinceau.moveTo(0,400);
pinceau.lineTo(400,400);
for(x=0;x<=400;x+=20){
pinceau.moveTo(x,400);
pinceau.lineTo(x,395);
}
pinceau.stroke();
</source>
 
Et quelque chose d'analogue pour l'axe des ordonnées (attention à ne pas oublier qu'il est ''à l'envers'').
 
=Arbre de Stern-Brocot=
1 277

modifications