« Programmation objet et géométrie/Les rectangles de canvas » : différence entre les versions
Contenu supprimé Contenu ajouté
Page créée avec « C'est plus facile de tracer un rectangle qu'un segment avec ''canvas'': Pas besoin de ''beginPath()'', de ''moveTo()'' ni de ''stroke()'' pour avoir le rectangle complet. ... » |
|||
Ligne 9 :
=Rectangles de Fibonacci=
Pour que les carrés dont les côtés sont des [[w:Nombre de Fibonacci|nombres de Fibonacci]] s'assemblent bien, il faut les coller tantôt à droite, tantôt en haut, tantôt à gauche et tantôt en bas de l'assemblage. Le choix se fera selon la valeur de ''n'' (l'indice de la boucle) modulo 4, et c'est une bonne occasion d'utiliser le fameux ''switch..case'' de [[w:JavaScript|JavaScript]]:
==Comment spiraler en JavaScript==
Pour garder une trace de la valeur de ''n'' modulo 4, on peut également changer de couleur de remplissage selon sa valeur (''a'' et ''b'' sont les nombres de Fibonacci qu'on est en train de calculer):
<source lang="javascript">
switch(n%4){
case 0: {
x+=a; y-=b-a;
pinceau.fillStyle="Red";
break;
}
case 1: {
x-=b-a; y-=b;
pinceau.fillStyle="Green";
break;
}
case 2: {
x-=b;
pinceau.fillStyle="Blue";
break;
}
case 3: {
y+=a;
pinceau.fillStyle="Magenta";
break;
}
</source>
À chaque fois, l'instruction ''break'' sert à éviter d'effectuer les autres déplacements après celui dont on a besoin.
==Dessin des rectangles==
Le script complet n'est pas beaucoup plus long: Il s'agit de rajouter les deux premiers carrés autour desquels la construction va se faire, et les deux instructions de dessin des rectangles (''fillRect'' pour le rectangle de couleur variable, et ''strokeRect()'' pour le bord):
<source lang="html5">
<html>
<head>
<script>
</script>
</head>
<style type="text/css">
canvas { border: 4px solid brown; background: #FFFFFF }
</style>
<body>
<canvas id="cadre" width="480" height="300">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
pinceau.strokestyle="Blue";
pinceau.fillStyle="Cyan";
a=1;
b=1;
x=150;
y=100;
pinceau.strokeRect(x,y,1,1);
y-=1;
pinceau.strokeRect(x,y,1,1);
for(n=2;n<=12;n++){
c=a+b;
a=b;
b=c;
switch(n%4){
case 0: {
x+=a; y-=b-a;
pinceau.fillStyle="Red";
break;
}
case 1: {
x-=b-a; y-=b;
pinceau.fillStyle="Green";
break;
}
case 2: {
x-=b;
pinceau.fillStyle="Blue";
break;
}
case 3: {
y+=a;
pinceau.fillStyle="Magenta";
break;
}
}
pinceau.fillRect(x,y,b,b);
pinceau.strokeRect(x,y,b,b);
}
</script>
</canvas>
<br/>
</body>
</html>
</source>
==Variante avec des arcs de cercles==
| |||