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

Un livre de Wikilivres.
Contenu supprimé Contenu ajouté
Aucun résumé des modifications
m L'image Figurecanvas4.svg a été retirée car elle a été supprimée sur Commons par Krd
Ligne 109 : Ligne 109 :
Voilà le résultat avec 12 carrés:
Voilà le résultat avec 12 carrés:



[[Fichier:figurecanvas4.svg]]


==Variante avec des arcs de cercles==
==Variante avec des arcs de cercles==

Version du 5 juillet 2014 à 21:07

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. En fait il y a deux méthodes permettant de dessiner un rectangle: strokeRect() qui dessine juste le cadre du rectangle, et fillRect() qui dessine un rectangle rempli. Les deux méthodes acceptent 4 arguments chacune:

  1. L'abscisse du coin supérieur gauche
  2. L'ordonnée du coin supérieur gauche
  3. La largeur du rectangle
  4. La hauteur du rectangle

Les rectangles peuvent servir à restreindre le tracé (par intersection avec le rectangle); ils peuvent être dessinés en semi-transparence; on peut leur affecter un dégradé. Ils peuvent servir à effacer la figure (en la recouvrant d'un rectangle blanc) ou à tracer des histogrammes. Dans ce chapitre, on va dessiner des rectangles de Fibonacci, qui sont en fait des assemblages de carrés (comme ça on donne le même paramètre à la largeur et la hauteur).

Rectangles de Fibonacci

Pour que les carrés dont les côtés sont des 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 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):

	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;
		}

À 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):

<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>

Voilà le résultat avec 12 carrés:


Variante avec des arcs de cercles

On peut aussi, au lieu des carrés, mettre des quarts de cercles qui se joignent:

<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="Red";
pinceau.lineWidth="4";
pinceau.beginPath();
a=1;
b=1;
x=150;
y=100;
for(n=2;n<=12;n++){
	c=a+b;
	a=b;
	b=c;
	switch(n%4){
		case 0: {
			x+=a; y-=b-a;
			pinceau.arc(x,y,b,Math.PI/2,0,true);
			break;
		}
		case 1: {
			x-=b-a; y-=b;
			pinceau.arc(x,y+b,b,0,-Math.PI/2,true);
			break;
		}
		case 2: {
			x-=b;
			pinceau.arc(x+b,y+b,b,-Math.PI/2,Math.PI,true);
			break;
		}
		case 3: {
			y+=a;
			pinceau.arc(x+b,y,b,Math.PI,Math.PI/2,true);
			break;
		}
	}
}
pinceau.stroke();

</script>
</canvas>
<br/>
</body>
</html>

Ça donne cette spirale: