34 Javasript: Albero di rettangoli.


Lo scopo di questa scheda è ottenere un albero come quello in figura.

Si potranno poi aggiungere colori, ombre, varianti, movimento.

Struttura del programma.


<canvas id="tela" width="800" height="600"> </canvas>

<script>

var grafica = document.getElementById("tela").getContext("2d");

var larghezza = 800;

var altezza = 600;

grafica.transform(1,0,0,-1,0,altezza); // cambio degli assi cartesiani


var riduzioneX = 0.4; // riduzione lungo l’asse X ad ogni passo

var riduzioneY = 0.6; // riduzione lungo l’asse Y ad ogni passo


function ramo(x,y,dx,dy) {

// la dovete creare voi, vedi spiegazione successiva.

}


function albero(x, y, dx, dy) {

if(dy<1) { return; }

ramo(x, y, dx, dy);

albero(x-dx, y+dy, dx*riduzioneX, dy*riduzioneY);

albero(x+dx, y+dy, dx*riduzioneX, dy*riduzioneY);

}


var x1=larghezza/2, y1=50, dx=200, dy=200;

albero(x1,y1, dx,dy);


La funzine ramo la dovete creare voi e deve disegnare un rettangolo come quello in figura.

Dovrete usare

grafica.beginPath();

grafica.moveTo(x, y);

grafica.lineTo(x-dx, y);

// ecc, ... completate voi

grafica.stroke();



Colori e varianti.

Dopo il comando grafica.stroke(); aggiungi il comando

grafica.fill();

Usa i seguenti comandi, messi all’inizio della funzione ramo:

grafica.strokeStyle = “green”;

grafica.fillStyle = “black”;

grafica.lineWidth = 5;

Puoi anche far dipendere lo spessore della linea

dalla misura di dx, per esempio con

grafica.lineWidth = dx/5;


Puoi cambiare forma ai rami: per ottenere

la prima variante ti bastera aggiungere un solo

comando lineTo alla funzione ramo.