07 JavaScript:  Grafica - lineTo

 

Il seguente programma disegna i bordi di un quadratino sullo schermo.

Modificalo per fare in modo che disegni una figura a tua scelta.

 

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

 

<script>

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

 

grafica.beginPath();

 grafica.moveTo(10,10);

 grafica.lineTo(30,10);

 grafica.lineTo(30,30);

 grafica.lineTo(10,30);

 grafica.lineTo(10,10);

grafica.stroke();

</script>

 

Prova adesso a creare le seguenti varianti:

1. Prima di beginPath(); puoi usare i seguenti comandi per cambiare:
spessore della linea, colore della linea, spessore dell'ombra, colore dell'ombra

  grafica.lineWidth = 5;

  grafica.strokeStyle = "red";

  grafica.shadowBlur = 40;

  grafica.shadowColor = "black";

 

2. Dopo stroke(); puoi aggiungere i seguenti comandi per scegliere il colore di riempimento e per riempire la figura:

    grafica.fillStyle = "pink";

    grafica.fill();

3.     Prova adesso a racchiudere tutti comandi in un ciclo for ed aggiungi il comando

grafica.translate(5,5):

     for(i=0; i<1000; i++) {
        grafica.translate(5, 5);

        <altri comandi gią scritti>

  }