06 JavaScript:  Grafica - rettangolo

 

Apri il Blocco Note e scrivi il programma accuratamente.

 

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

 

<script>

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

 

grafica.strokeRect(

Math.random()*700,

Math.random()*500,

Math.random()*20,

Math.random()*20

);

 

</script>

 

Prova adesso a creare le seguenti varianti:

1. Prova a racchiudere il comando strokeRect dentro a un blocco for:

   for(i=0; i<1000; i++) {
 

 }

 

2. Prova ad aggiungere il seguente comando prima di strokeRect:

 

   grafica.lineWidth = Math.random()*6;

 

3. Prova ad aggiungere il seguente comando prima di strokeRect:

 

     grafica.strokeStyle = "red";

 

4. Crea delle varianti: 

-            puoi modificare il numero di rettangoli nel ciclo for

-            puoi far scegliere il numero di rettangoli all'utente

-            puoi provare altri colori

-            puoi provare altri spessori