« Programmation objet et géométrie/Les lignes droites de canvas » : différence entre les versions
Contenu supprimé Contenu ajouté
Aucun résumé des modifications |
Aucun résumé des modifications |
||
Ligne 4 :
==Segment==
===Segment en traits pleins===
L'algorithme est le suivant:
Ligne 34 ⟶ 36 :
</html>
</source>
===Segment en pointillés===
==Triangle==
Ligne 62 ⟶ 68 :
</source>
Une variante consiste à remplir le triangle au lieu de seulement dessiner ses
<source lang="
<html>
<style type="text/css">
Ligne 87 ⟶ 93 :
==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=
| |||